如何將數據饋入動態Ractive組件？

我正在創建一個頁面，顯示從JSON藍圖指定的Ractive組件，並且需要一些幫助將正確的數據傳遞到組件。如何將數據饋入動態Ractive組件？

我在最簡單的情況瞭解如何將數據傳遞到一個組件：

（例如，<dog theData={{theData}} />）

但在這種情況下，我使用的是Ractive.extend功能，能夠爲組件到循環，並嘗試了很多事情，以獲得正確的數據到每個組件無濟於事。

這撥弄應該解釋一下： https://jsfiddle.net/4kax8dLo/7/

在「getComponent」功能，我需要使用「這個」下「homePageSections」找到合適的數據和這些數據送入組件。

如果成功的話，頁面應該說「navText是飴HAA。」

（如果這些似乎喜歡把東西在頁面上過於複雜的方式，讓我知道，我可以詳細的使用情況。有可能是一種更簡單，更優雅的方式來實現這一目標。）

感謝您的任何指導或建議！

來源

2016-09-13 James Jensen

您確定您需要組件嗎？從你的例子看來，你只需要使用偏好（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/ 有關更多的背景信息，請參閱下面的註釋。

來源

2016-09-15 07:40:30 Leakim

非常感謝，這很好地說明了這種情況，儘管我已經大大地簡化了用例，但實際上我需要組件，因爲每個組件都有我們需要保留在組件中的邏輯。但我們會看看我們是否可以調整您的示例以使用組件。如果你想解決這個問題，我們會很樂意支付諮詢費（不確定在Stack Overflow上是否可以這麼說）。 –

在這種情況下，我想你可以試試這個尺寸（https://jsfiddle.net/grkgb0sr/）。這是相當「硬編碼」，但至少它使您的示例使用組件。希望這給你更多的東西:) – Leakim

這正是我一直在試圖做的，非常感謝你！ –

如何將數據饋入動態Ractive組件？

回答

相關問題