Question

我正在创建一个淘汰赛自定义元素，我想在其中注入一些HTML。像我们用聚合物做的事情。

我想做类似的事情：

ko.components.register('hello-world', {
    template: '<h1> Hello World!</h1>\
                  <!-- My injected html must be placed here -->\
               <h1> Bye Bye World! </h1>'
});

然后我的html将是：

<hello-world>
   <div>
     I'm just an example text!
   </div>
</hello-world>

并且，在ko.applyBindings（）之后，将呈现：

<h1> Hello World!</h1>
   <div>
      I'm just an example text!
   </div>
<h1> Bye Bye World! </h1>

这可能吗？

Answer 1

您可以使用模板绑定：

.html文件：

<script type="text/html" id="inner-template">
   <div>
     I'm just an example text!
   </div>
</script>

成分：

ko.components.register('hello-world', {
    template: '<h1> Hello World!</h1>\
               <!-- ko template: 'inner-template' -->\
               <!-- /ko -->\
               <h1> Bye Bye World! </h1>'
});

或者为嵌套元素使用其他组件。

更新1

计算内部模板：

ko.components.register('hello-world', {
    veiwModel: {
        createViewModel: function(params, componentInfo) {
            return {
               getTemplateName: function() {
                   var templateName = "inner-template";
                   // Template name calculation logic here...
                   return templateName;
               }
            };
        }
    },
    template: '<h1> Hello World!</h1>\
               <!-- ko template: getTemplateName() -->\
               <!-- /ko -->\
               <h1> Bye Bye World! </h1>'
});

Answer 2

是。请参阅文档中的Passing markup to components部分。

默认情况下，内部的DOM节点将被剥离（不受任何视图模型的约束），并由组件的输出替换。但是，这些DOM节点不会丢失：它们会被记住，并以两种方式提供给组件：

作为数组$componentTemplateNodes，可用于任何绑定   组件模板中的表达式（即作为绑定上下文   属性）。通常这是使用提供的最方便的方法   标记。请参阅下面的示例。作为阵列，   componentInfo.templateNodes，传递给createViewModel函数

是否可以将html注入Knockout自定义元素？

2 个答案:

更新1