有没有办法配置 Knockout component 替换容器元素而不是将其内容嵌套在容器元素中？

例如，如果我使用以下模板将自定义组件注册为 my-custom-element:

<tr>
    <p>Hello world!</p>
</tr>

是否可以像这样使用组件:

<table>
    <tbody>
        <my-custom-element></my-custom-element>
    </tbody>
</table>

最终产品是这样的:

<table>
    <tbody>
        <tr>
            <p>Hello world!</p>
        </tr>
    </tbody>
</table>

而不是这样:(Knockout 默认渲染组件的方式)

<table>
    <tbody>
        <my-custom-element>
            <tr>
                <p>Hello world!</p>
            </tr>
        </my-custom-element>
    </tbody>
</table>

Based on the answer to this question ，似乎此功能内置于模板引擎中，我假设在呈现组件模板时也会使用它。

有没有一种方法可以指定组件应该使用 replaceNode 的 renderMode 进行渲染？

我知道“虚拟元素”语法，它允许在 HTML 注释中定义组件:

<table>
    <tbody>
        <!--ko component { name: 'my-custom-element' }--><!--/ko-->
    </tbody>
</table>

但我真的不喜欢这种语法——在注释中编写真正的代码感觉就像是一种肮脏、肮脏的黑客行为。

最佳答案

考虑到库的性质(我已经说过)和开发人员的团队理念，我想可以为缺少此选项辩护:

Knockout 是一个库，与其他 MVC 不同，它不会强制您使用框架定义的方式来构建您的应用程序。如果您将 Knockout 中的模板引擎与几乎所有其他 JS 模板引擎(Angular、下划线、mustache 等)进行比较，Knockout 是唯一一个不“修改”原生 HTML5 渲染的引擎。所有其他人都使用自定义标签，无论是 <% %>或 {{ }}这需要一个小型 JS 解析器将标签转换成有意义的东西(现在 KO 也有一个 Knockout punches 插件，其中包括 mustache 风格的标签，而且诚然 KO 确实对 <!-- ko --> 评论做了一点“罪恶”)。 KO 使用 HTML 5 自定义元素、注释和属性标签，完全“ Vanilla ”。

例如，使用了 JS/DOM 类型的“对象(和现实生活？)层次结构”:只有 parent 才能对 child 施加权力，因此绑定(bind)元素不会被替换，但随着 child 的扩大。例如:

// we cannot do this in JS
document.getElementById('elem').remove(); //implied .remove(self)
// instead we do this
var elem = document.getElementById('elem');
container = elem.parentNode.removeChild(elem);

随后，使用 KO 进行数据绑定(bind)的首选方式，foreach 很好地说明了这一点绑定(bind)，是:

<div data-bind="foreach: myList">
  <span data-bind="text: $data"></span>
</div>

前面的代码片段是 JS 数组的 HTML 表示，层次结构再次可见:

var myArr = [1,2,3,4,5];
// we cannot do the following without reference to the array index, 
// which is not held by the object itself,     
// but a meta-property getting meaning relative to the parent
myArr[0].splice(0,1); //remove

这会导致您的 HTML View 完美复制您的 JS 数据(看到有人构建一个工具来显示 HTML 中的数据绑定(bind)缩进级别(使用 with 和 foreach )会很有趣文档。但是，在某些情况下，您需要注释标签，以免破坏 HTML 布局或 css 规则(嵌套)，例如要注入(inject)的“纯文本”组件 (i18n)文本节点之间:

<p>Some predefined text with
<!-- ko text: 'some variable text' --><!-- /ko -->
and more predefined text</p>

或者当你不想让一个空元素在隐藏时占用空间

<!-- ko if: !hidden() --><div id="myToggleableDiv"></div><!-- /ko -->

然后是custom tags ，这是标准化的，而且更加清晰；但不幸的是还没有 100% 准备好。选择data-bind首先，<!-- ko -->第二，<custom>第三(如果完全实现会更高)。无论如何，这就是我的看法。至于您的具体情况，如果您的组件包含列表模型，您可以:

<table data-bind="{component: {name: 'custom', params {..}}"></table>

并包括 tbody在你的虚拟机中，否则如果它是一个列表项模型，你可以使用三种“语法”中的任何一种，例如评论语法

<table>
  <tbody data-bind="foreach: mylist">
    <!-- ko component: {name: 'custom', params: $data} --><!-- /ko -->
  </tbody>
</table>

或者遵循 SOC principle 将您的组件完全从嵌套在特定父级(表)中的要求中分离出来。 ，例如:

<table>
  <tbody data-bind="foreach: mylist">
    <tr data-bind="foreach: properties">
      <td data-bind="component: {name: 'custom', params: $data}></td>
    </tr>
  </tbody>
</table>

或使用自定义标签:

<table>
  <tbody data-bind="foreach: mylist">
    <tr data-bind="foreach: properties">
      <td><custom params= "{data: myData"></custom></td>
    </tr>
  </tbody>
</table>

按照优先顺序..

关于javascript - 使用 Knockout 组件时替换容器元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28369613/