Question

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

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

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

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

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

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

如果成功，页面应该说“navText就是这样。”

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

感谢任何指导或建议！

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

话虽这么说，你可能会重构你的代码看起来很清楚，如果你满意的部分是你需要的任务。

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

如何将数据提供给动态Ractive组件？

1 个答案: