Question

我正在制作一个可排序的组件。您可以想象一个具有以下API的简单实现：

{{sortable-list content=orderedQuestions tag='ul' itemTag='li'}}

但是，这提供了相当有限的模板定制。理想情况下，我希望API允许这样的内容：

{{#sortable-list content=orderedQuestions tag='ul'}}
  <li>
    <h2>{{title}}</h2>
    <div>Some more {{details}}</div>
  </li>
{{/sortable}}

此块模板用于每个可排序项目。这可能吗？我为组件的模板尝试了类似的东西：

{{#each item in content}}
  {{#with item}}
    {{yield}}
  {{/with}}
{{/each}}

但这不起作用，因为用户传入组件的块模板将控制器作为其上下文。

我可以追求的是什么？

Answer 1

您目前无法做到的确切事情。

看看at this Github issue，看看围绕这样的组件用例的大量讨论。特别要看看Trek的第一个评论。

另一种方法是将您的组件分解为多个组件：

{{#sortable-list content=orderedQuestions tag='ul'}}
  {{#each orderedQuestions}}
    {{#sortable-item tag='li'}}
      <h2>{{title}}</h2>
      <div>Some more {{details}}</div>
    {{#sortable-item}}
  {{/each}}
{{/sortable}}

如果您根据现有HTML元素考虑组件，您会发现它看起来有点像select里面有options。为了完成这项工作，sortable-items可能需要与可排序列表进行通信。一种选择是在组件中使用parentView来访问父级。

来自Ryan Florence的

Take a look at this talk以获得有关如何处理可组合组件的更多想法。

更新

更新了我的答案，以便在{{sortable-item}}周围添加每个更改上下文。

通过Ember each helper阅读它似乎可以让一个组件做你想做的事情，但看起来真的很毛茸茸。

我可以让用户自定义组件的模板吗？

1 个答案:

更新