Omi v1.0.2 출시와 관련하여 자바스크립트 표현식 전달을 위한 코드 분석을 공식 지원합니다.

이 글에서는 javascriptexpressions 전달을 지원하는 Omi v1.0.2의 공식 릴리스를 주로 소개합니다. 이는 매우 훌륭하고 참고할 만한 가치가 있습니다.

이 앞에 쓰여있습니다

Omi 프레임워크는 컴포넌트에서 data-*를 선언하여 하위 노드에 속성을 전달할 수 있습니다.

Omi는 처음부터 표준 DOM 태그의 표준 전달 방식에 맞춰 설계되었습니다. 예:

• 밑줄은 자동으로 카멜 표기로 변환되고, data-page-index는 하위 구성 요소에 전달되어 this.data.pageIndex

• data-xx는 하위 노드에 전달되고 모두 문자열이 됩니다. 예를 들어 하위 노드에서 data-page-index="1"이면 this.data.pageIndex는 문자열 "1"입니다. 🎜>

이러한 한계와 문제점은 무엇입니까? 예:

JSON을 전달할 수 없음
숫자 유형을 전달할 수 없음
bool 유형을 전달할 수 없음
그러면 자바스크립트 표현식 전달을 지원하면 이러한 문제점을 해결할 수 있습니다.

더 이상 고민할 필요 없이 유물의 콜론을 살펴보겠습니다.

콜론 표시다음 예를 보세요.

import Hello from 'hello.js'
Omi.makeHTML('Hello', Hello);
class App extends Omi.Component {
 render() {
 return `
 <p>
 <Hello :data-user="{ name : &#39;Dntzhang&#39;, favorite : &#39;Omi&#39; }" />
 </p>
 `
 }
}
Omi.render(new App(),"#container")

data-user 앞에 콜론을 추가하세요. is: data-user , 이는 전달되는 내용이 js 표현식임을 의미하므로 충분히 편리합니다.

그런 다음 Hello 구성 요소 내에서 직접 사용할 수 있습니다.

class Hello extends Omi.Component {
 render() {
 return `
 <p>
 <h1 id="user-name-nbsp-love-nbsp-user-favorite">{{user.name}} love {{user.favorite}}.</h1>
 </p>
 `
 }
}

hello 구성 요소에서 this.data.user를 인쇄해 볼 수도 있습니다.

다른 유형 전달 위의 예는 JSON을 전달하는 방법을 보여주며, 다른 유형도 지원됩니다. 예:

<Hello :data-age="18" />
 <Hello :data-xxx="1+1*2/3" />
 <Hello :data-is-girl="false" />
 <Hello :data-array-test="[1,2,3]" />

복잡한 유형마지막으로 조금 더 복잡한 경우를 보여드리겠습니다.

class Hello extends Omi.Component {
 handleClick(evt){
 alert( this.data.arrayTest[0].name)
 }
 render() {
 return `
 <ul>
 {{#arrayTest}}
 <li onclick="handleClick">{{name}}</li>
 {{/arrayTest}}
 </ul>
 `;
 }
}
Omi.makeHTML(&#39;Hello&#39;, Hello);
class App extends Omi.Component {
 render() {
 return `
 <p>
 <Hello :data-array-test="[{name:&#39;dntzhang&#39;},{name:&#39;omi&#39;},{name:&#39;AlloyTeam&#39;}]" />
 </p>
 `;
 }
}
Omi.render(new App(),"#container");

Of 물론 하위 구성 요소에서는 mustache.js

템플릿 엔진

구문을 사용하는 대신 ES6+ 상태를 사용하여 탐색할 수도 있습니다.

class Hello extends Omi.Component {
 render() {
 return `
 <ul>
 ${this.data.arrayTest.map(item =>
 `<li>${item.name}</li>`
 ).join(&#39;&#39;)}
 </ul>
 `;
 }
}

이것이 omi가 omi.js와 omi.lite.js의 두 가지 버전을 제공하는 이유입니다. omi.lite.js에는 mustache.js 템플릿 엔진이 포함되어 있지 않습니다.

위 내용은 Omi v1.0.2 출시와 관련하여 자바스크립트 표현식 전달을 위한 코드 분석을 공식 지원합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!