Javascript 使用敲除组件时更换容器元件

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

例如，如果使用以下模板将自定义组件注册为

my custom element

：

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

---

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

考虑到库的性质（我在这里说过），以及开发人员的团队理念，我认为缺少这种选项可以得到这样的辩护：

Knockout是一个库，与其他MVC不同，它不会强制您使用框架定义的方式来构造应用程序。如果你认为模板引擎在KokOutt与几乎所有其他JS模板引擎（角、下划线、胡子等）中，KokOutExod作为唯一一个不是“MODEN”的原生HTML5渲染。所有其他人都使用自定义标记，无论是

还是

{{}

，它需要一个小的JS解析器来将标记转换成有意义的东西（现在KO也有一个插件，其中包含了mustache样式的标记，无可否认，KO使用

注释“sin”了一点）。KO使用HTML5自定义元素、注释和属性标记，完全“香草”

例如，使用了JS/DOM类型的“对象（和现实生活？）层次结构：只有父母才能对他们的孩子施展权力，因此绑定到元素不会被替换，而是用孩子放大。举例说明：

// 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);

随后，

foreach

绑定很好地说明了使用KO进行数据绑定的首选方法是：

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

这导致您的HTML视图是JS数据的完美复制（如果有人构建一个显示数据绑定缩进级别的工具（使用

with

和

foreach

），那将是一件有趣的事情在HTML文档中。但是，在某些情况下，您需要注释标记，以便不破坏HTML的布局或css规则（嵌套），例如在文本节点之间插入的“纯文本”组件（i18n）：

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

并在VM中包含

tbody

，否则，如果它是listitem模型，则可以使用三种“语法”中的任何一种，例如注释语法

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

或者将您的组件与嵌套在特定父级（表）中的要求完全分离，遵守以下要求，例如：

好消息！在Knockout 3.3.0中，他们刚刚引入了的概念。这是通过在组件中使用
$componentTemplateNodes
模板实现的

从链接的示例中：

<template id="my-special-list-template">
    <h3>Here is a special list</h3>

    <ul data-bind="foreach: { data: myItems, as: 'myItem' }">
        <li>
            <h4>Here is another one of my special items</h4>
            <!-- ko template: { nodes: $componentTemplateNodes, data: myItem } --><!-- /ko -->
        </li>
    </ul>
</template>

<my-special-list params="items: someArrayOfPeople">
    <!-- Look, I'm putting markup inside a custom element -->
    The person <em data-bind="text: name"></em>
    is <em data-bind="text: age"></em> years old.
</my-special-list>


这是一份特别的清单


这是我的另一件特别物品


人
他已经岁了。
您可以使用注释标签：



这听起来像是您正在寻找的东西。一般来说，Web组件是一个DOM节点，隐藏它的子节点。它不打算被替换，因为在这种情况下，概念本身就被破坏了。
<div data-bind="foreach: myList">
  <span data-bind="text: $data"></span>
</div>

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

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

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

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

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

<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>

<template id="my-special-list-template">
    <h3>Here is a special list</h3>

    <ul data-bind="foreach: { data: myItems, as: 'myItem' }">
        <li>
            <h4>Here is another one of my special items</h4>
            <!-- ko template: { nodes: $componentTemplateNodes, data: myItem } --><!-- /ko -->
        </li>
    </ul>
</template>

<my-special-list params="items: someArrayOfPeople">
    <!-- Look, I'm putting markup inside a custom element -->
    The person <em data-bind="text: name"></em>
    is <em data-bind="text: age"></em> years old.
</my-special-list>

<!-- ko component: {
    name: "message-editor",
    params: { initialText: "Hello, world!", otherParam: 123 }
} -->
<!-- /ko -->