Question

我正在尝试在knockout.js中创建一个自定义组件。

HTML

<demo-widget>TEXT NEEDED</demo-widget>

的Javascript

ko.components.register('demo-widget', {
    template: '<div>New Text</div>'
});

ko.applyBindings();

该组件可以很好地加载所有内容，但我现在要做的是能够获取原始自定义组件标记内的任何内容（例如“需要文本”文本）。

知道我怎么能这样做吗？希望我能够清楚地解释清楚。

这是一个小提琴：http://jsfiddle.net/WhesleyBarnard/f7bmynp5/5/

Answer 1

现在可以使用（从Knockout 3.3开始），请参阅此处的KnockoutJS文档：Passing markup into components。

我不会在这里复制整篇文章，但要点是：

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


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

作为数组，componentInfo.templateNodes传递给其createViewModel函数


然后，组件可以选择使用提供的DOM节点作为其输出的一部分，但是它希望，例如在组件模板中的任何元素上使用template: { nodes: $componentTemplateNodes }。

相关问题：Knockout 3.2: can components / custom elements contain child content?

Answer 2

为什么不使用params属性来保存初始文本：

HTML：

<demo-widget params="initialValue: 'text i need to get...'"></demo-widget>

JS：

ko.components.register('demo-widget', {
    template: "<div data-bind=\"text: 'content in my component. previous was: '
                                      + initialValue \">
               </div>"
});

ko.applyBindings();

获取knockout.js自定义组件内容

2 个答案:

HTML：

JS：