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

【问题标题】：Getting knockout.js custom component content获取 knockout.js 自定义组件内容
【发布时间】：2015-04-23 14:55:40
【问题描述】：

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

HTML

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

Javascript

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

ko.applyBindings();

组件加载正常，一切正常，但我现在想做的是能够获取原始自定义组件标签内的任何内容（例如“TEXT NEEDED”文本）。

知道我该怎么做吗？希望我解释得足够清楚。

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

【问题讨论】：

标签： knockout.js knockout-components

【解决方案1】：

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

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

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

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

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

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

【讨论】：

【解决方案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();

【讨论】：

我希望它能够处理标签内的大量 html。
@WhesleyBarnard，在淘汰赛应用绑定的那一刻，内容被删除。您应该将该内容保存在其他地方，即 ko 未处理的另一个元素（可能是隐藏的）。如果这不合适，那么您到底想达到什么目的？
嗨。我只是在尝试一些概念证明。比如说我想创建自己的小 wiziwig 编辑器。然后它将获取标签内的所有内容，您将能够对其进行操作。如果我使用参数，我肯定会让它工作，只是认为如果我们也能够抓取标签内的内容会很酷。