javascript - 具有命名模板的淘汰赛 3.2 组件？

Question

我正在尝试在淘汰赛 3.2.0 中使用新的组件系统。

目前没有太多文档，但这确实有效。

ko.components.register('price-input', {
  template: '<span>price-input</span>'
})

但是，template绑定允许您指定 DOM 中已经存在的模板名称，例如：

<script type="text/html" id="price_input">
  <span>price-input</span>
</script>

然后你可以这样做：

<div data-bind="template: {name: 'price_input'}"></div>

所以我尝试了这个：

ko.components.register('price-input', {
  template: {name: 'price_input'}
})

但它不起作用。有没有办法将命名模板与新组件一起使用，或者它们必须内联或加载 AMD。

谢谢

编辑：在 RP Niemeyer 的回答之后，为了澄清，这里是我尝试他回答的模板：

<script type="text/html" id="ifx_price_input">
  <h4>PRICE INPUT <span data-bind="text: value"></span></h4>
</script>

这是组件代码：

ko.components.register('price-input', {
  template: {element: 'ifx_price_input'}
})

它确实加载了模板，但将其视为转义字符串。

想法？

score 8 · Accepted Answer

您可以传递一个element属性，它可以是元素本身，也可以是元素的字符串，id例如：

template: { element: 'myTmpl' }

score 6 · Accepted Answer

在 v3.2.0 测试版中，这种情况没有得到很好的处理，因此InternalFX需要黑客。

这将在 v3.2.0 最终版中修复。它将按您的预期工作 - 只需引用一个script、template或textarea元素，其逻辑内容将被解释为模板节点。

如果您有兴趣，修复和测试的提交在这里：https ://github.com/knockout/knockout/pull/1454

score 1 · Accepted Answer

最后用一些hackery解决了这个问题......我希望淘汰赛开发人员能更好地回答这个问题。

这行得通。基本上我只是手动加载模板文本并将其传递给register函数。所以它就像是内联的一样工作。

ko.components.register('price-input', {
  template: $('#ifx_price_input').html()
})

3 回答 3