JSON 청사진에서 지정된 Ractive 구성 요소를 표시하는 페이지를 만들고 있으며 올바른 데이터를 구성 요소로 전달하는 데 도움이 필요합니다.
가장 간단한 경우 구성 요소에 데이터를 전달하는 방법을 이해합니다.
(예 <dog theData={{theData}} />)
그러나이 경우에는 Ractive.extend 함수를 사용하여 구성 요소를 루프에 제공하고 각 구성 요소에 올바른 데이터를 제공하기 위해 많은 것을 시도했습니다.
이 바이올린은 그것을 설명해야합니다 : https://jsfiddle.net/4kax8dLo/7/
"getComponent"함수에서 "this"를 사용하여 "homePageSections"에서 적절한 데이터를 찾고이 데이터를 구성 요소에 공급해야합니다.
성공하면 페이지에 "the navText is yee haa"라고 표시되어야합니다.
(이것이 페이지에 항목을 넣는 지나치게 복잡한 방법처럼 보인다면 알려 주시면 유스 케이스를 자세히 설명 할 수 있습니다. 목표를 달성하는 더 간단하고 우아한 방법이있을 수 있습니다.)
지도 나 조언에 감사드립니다!
구성 요소가 전혀 필요합니까? 귀하의 예에서 부분 만 ( http://docs.ractivejs.org/latest/partials ) 잘 할 것 같습니다 .
이 경우 부분 접근 방식으로 작동하도록 예제를 약간 수정했습니다. https://jsfiddle.net/cxnhtxLy/
부분 정의 :
partials: {
dog: '{{#with theData}}<h3>the dog is a <span style="color: {{color}};">{{dogType}}</span> and this works fine</h3>{{/with}}',
topHomeNav: '<div>the navText is: {{data.navText}} </div>',
heroUnit:'<div><h2>THE HERO TITLE IS:</h2><br />{{data.heroTitle}}</div>',
filterResults: '<div>filter results: </div>',
pageFooter:'<div>footertext is: {{data.footertext}}</div>'
}
인쇄용 루프 :
{{#each homePageData.views[currentView]}}
{{#with homePageData.homePageSections[this]}}
{{> this.partial}}
{{/with}}
{{/each}}
즉, 작업에 필요한 부분 만 만족한다면 코드를 훨씬 깔끔하게 리팩터링 할 수 있습니다.
업데이트 : 이것은 구성 요소로 작업하는 바이올린입니다. https://jsfiddle.net/grkgb0sr/ 자세한 배경 이야기는 아래 주석을 참조 하십시오.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다