如何将数据馈送到动态 Ractive 组件中？

Question

我正在创建一个显示 JSON 蓝图指定的 Ractive 组件的页面，需要一些帮助将正确的数据传递到组件中。

我了解如何在最简单的情况下将数据传递到组件中：

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

但在这种情况下，我使用 Ractive.extend 函数将组件提供给循环，并且尝试了很多方法来为每个组件获取正确的数据，但都无济于事。

这个fiddle应该解释一下： https://jsfiddle.net/4kax8dLo/7/

在“getComponent”函数中，我需要使用“this”在“homePageSections”下找到合适的数据，并将这些数据提供给组件。

如果成功，页面应显示“导航文本是 yee haa”。

（如果这些在页面上放置内容的方式看起来过于复杂，请告诉我，我可以详细说明用例。可能有更简单、更优雅的方式来实现目标。）

感谢任何指导或建议！

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}}

话虽这么说，但如果您对任务所需的部分感到满意，您可能会重构您的代码以使其看起来更清晰。

更新： 这是 fiddle 使用组件。 https://jsfiddle.net/grkgb0sr/ 有关更多背景故事，请参阅下面的评论。

如何将数据馈送到动态 Ractive 组件中？

How to feed data into a dynamic Ractive component?

ractivejs