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>

但是，您拥有component binding，可让您在运行时选择组件：

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

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

RE：更新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中，您可以拥有一个名为side-menu-view的属性，您可以在// html for "side-menu-view" <div data-bind="component: { name: menuType }"/>的html中使用它，如下所示：

menuType('menu-static')

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

Answer 2

淘汰赛的模型可以“预定义”用于常规用途，然后针对特定目的进行扩展。这意味着：

正常创建对象/模型
创建具有扩展属性的对象/模型
将两个模型混合在一起，即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"

Knockout.js可组合组件？

2 个答案: