Omi v 1.0.2 발표 공식 지원 자 바스 크 립 트 표현 식

앞 에 쓰다
Omi 프레임 워 크구성 요소 에 data-*속성 을 하위 노드 에 전달 할 수 있 습 니 다.
Omi 는 디자인 초기 부터 표준 DOM 라벨 의 표준 전달 방식 을 일치 시 켰 다.예 를 들 면:

밑줄 을 그 으 면 자동 으로 낙타 봉 을 돌리 고 data-page-index 가 하위 구성 요소 에 전달 되면 this.data.pageIndex

가 됩 니 다.

data-xx 가 하위 노드 에 전달 하 는 것 은 모두 문자열 이 됩 니 다.예 를 들 어 data-page-index="1"부터 하위 노드 까지 this.data.pageIndex 는 문자열"1"

입 니 다.
이렇게 하면 어떤 한계 와 문제 가 있 습 니까?예:

JSON 전달 불가

number 타 입 을 전달 할 수 없습니다

bool 타 입 을 전달 할 수 없습니다

자 바스 크 립 트 표현 식 을 전달 하 는 것 을 지원 하면 이 통 증 을 해결 할 수 있 습 니 다.
쓸데없는 소리 하지 말고 신기 의 사칭 을 보 세 요.
콜론 마크
다음 예 를 보십시오.

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

data-user 앞 에 사칭 즉:data-user 를 붙 이 는 것 은 js 표현 식 을 전달 하 는 것 을 의미 합 니 다.편리 하 시 죠?
그리고 Hello 구성 요소 에서 직접 사용 할 수 있 습 니 다.

class Hello extends Omi.Component {
 render() {
 return `
 <div>
 <h1>{{user.name}} love {{user.favorite}}.</h1>
 </div>
 `
 }
}

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('Hello', Hello);
class App extends Omi.Component {
 render() {
 return `
 <div>
 <Hello :data-array-test="[{name:'dntzhang'},{name:'omi'},{name:'AlloyTeam'}]" />
 </div>
 `;
 }
}
Omi.render(new App(),"#container");

물론 하위 구성 요소 에서 도mustache.js 템 플 릿 엔진문법 을 사용 하지 않 고 ES6+자 세 를 사용 하여 옮 겨 다 닐 수 있 습 니 다.

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

이것 도 역시 omi 가 두 가지 버 전,omi.js 와 omi.lite.js 를 제공 한 이유 이다.omi.lite.js 는 템 플 릿 엔진 을 포함 하지 않 습 니 다.
위 에서 말 한 것 은 편집장 이 소개 한 Omi v 1.0.2 에서 자 바스 크 립 트 표현 식 을 전달 하 는 것 을 공식 적 으로 지원 합 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!