Knockout.js可组合组件？

Question

我正在考虑使用Knockout.js创建可重用的组件。 但是，通过阅读文档，我不知道如何实现一个可以在其中容纳其他组件（每次使用可能会有所不同）的组件。

例如，我想实现一个侧面菜单组件，该组件将包含带有菜单按钮的标题栏，菜单面板和内容面板。 菜单和内容面板的内容不应预先定义。 例如，在一个用例中，我会将一个列表视图组件放入菜单面板，在另一个用例中，我可以将一个复选框列表放入菜单面板。

据我从文档了解，在Knockout.js中，必须完全定义组件的模板，并且不提供稍后可以插入其他组件的位置。 还是我错了？ 能做到吗 谢谢！

更新：

我想创建一个组件，该组件可以用作：

<side-menu-view>
  <menu>
    <!-- I can put anything here -->
  </menu>
  <content>
    <!-- I can put anything here -->
  </content>
</side-menu-view>

我知道可以通过$ componentTemplateNodes访问组件的子节点，但是然后我希望能够分别获取<menu>和<content> ，并将其放在组件布局的适当位置。

更新2：

使用示例：

<side-menu-view>
  <menu>
    This is a menu!
  </menu>
  <content>
    This is content!
  </content>
</side-menu-view>

或像这样：

<side-menu-view>
  <menu>
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </menu>
  <content>
    <h1>Title</h1>
    <p>Some text</p>
  </content>
</side-menu-view>

Answer 1

如果您使用的是自定义html元素语法，那么您是对的，编写html时必须了解组件，如下所示：

<menu-panel>
    <list params="..."/>
</menu-panel>

但是，您具有组件绑定 ，可让您在运行时选择组件：

<menu-panel>
    <div data-bind="component: {
        name: yourDynamicComponentName,
        params: { ... },
    }"/>
</menu-panel>

请注意，当然， yourDynamicComponentName仍必须注册，以便淘汰赛知道在哪里可以找到它。

RE：Update 2（仅关注menu控件，因为它与content控件很相似）：

因此，您只需定义两个组件，一个称为menu-list ，另一个称为menu-static ：

// html for a component called "menu-list"
<ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
</ul>

// html for a component called "menu-static"
This is a menu!

而在你viewModel的side-menu-view ，你可以有一个叫做财产menuType ，你将在HTML中使用它side-menu-view像这样：

// html for "side-menu-view"
<div data-bind="component: { name: menuType }"/>

因此，当您要在菜单类型之间切换时，现在可以设置menuType('menu-static')或menuType('menu-list') 。

Answer 2

敲除模型可以被“预定义”以用于常见用途，然后可以扩展用于特定目的。 这意味着：

1. 像平常一样创建对象/模型
2. 创建具有扩展属性的对象/模型
3. 将两个模型与jQuery的$ .extend混合使用

例：

var mainModel = function () {
    this.blablabla = ko.observable('blablabla');
}

var extendedModel = function () {
    this.sup = ko.observable('sup');
}

var myModelInstance = $.extend({}, new mainModel(), new extendedModel());

console.log(myModelInstance.blablabla(), myModelInstance.sup()); // "blablabla", "sup"