동적 Ractive 구성 요소에 데이터를 공급하는 방법은 무엇입니까?

Question

JSON 청사진에서 지정한 Ractive 구성 요소를 표시하는 페이지를 만들고 구성 요소에 올바른 데이터를 전달하는 데 도움이 필요합니다.

나는 구성 요소에 데이터를 전달하는 방법을 간단한 경우에 이해 :

(예를 들어, <dog theData={{theData}} />)

그러나이 경우

, 나는에 구성 요소를 제공하기 위해 Ractive.extend 기능을 사용하고 있습니다 루프를 사용하여 각 구성 요소에 대한 올바른 데이터를 얻을 수있는 많은 것을 시도했습니다.

이 바이올린은 그것을 설명한다 : https://jsfiddle.net/4kax8dLo/7/

을 "getComponent"함수에서, 내가 사용하는 "이" "homePageSections"에서 적절한 데이터를 찾을 수 및 구성 요소에이 데이터를 공급해야합니다.

성공하면, 페이지 "는 navText이 유의 랍스터입니다."말을해야

을 (이 한 페이지에 물건을 넣을 수있는 overcomplicated 방법처럼 보인다면 저에게 알려 주시면 자세히 유스 케이스를 할 수 있습니다.이 목표를 달성하는 더 간단하고 우아한 방법 일 수 있습니다.)

모든 안내 또는 조언에 감사드립니다!

Answer 1

구성 요소가 필요하십니까? 당신의 예제에서 당신은 단지 부분적으로 잘 할 것 같습니다 (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}} 

, 당신은 아마 당신이 만족하는 경우 꽤 많이 청소기보고 코드를 리팩토링 수 partials 만 있으면 작업에 필요한 모든 것입니다.

업데이트 : 이것은 구성 요소로 작업하는 바이올린입니다. https://jsfiddle.net/grkgb0sr/ 자세한 내용은 아래의 의견을 참조하십시오.