如何在没有 erasing/overwriting 任何旧绑定的情况下让我的 Knockout.js 组件附加到页面？

Question

Fiddle: http://jsfiddle.net/mpqtsjhL/27/

基本上我有一个使用模板的 Knockout.js 组件：

JavaScript:

ko.components.register('sublist', {
    synchronous: true,
    viewModel: function (params) {},
    template: {
        element: 'my-component-template'
    }
});

HTML

<ul data-bind="component:{name:'sublist',params:{vm:sidebarVm}}" class=""></ul>
<template id="my-component-template">
    <!-- ko foreach: sidebarVm.stepList.steps-->
      <li data-bind="html: message"></li>
    <!-- /ko -->
</template>

我有多个 ViewModel，用户可以通过单击某些按钮将其加载到该模板中。正如我现在所拥有的，当用户加载一个新的 ViewModel 时，它会覆盖旧的。

期望的功能： 当用户单击按钮加载新的 Viewmodel 时，这些新的列表元素 <li> 会被附加而不是替换现有的。如何？？在Fiddle中，一个列表总共应该有6个列表元素。

编辑： 也许我必须在这个新的 fiddle 中沿着路线走下去？也许像这样的东西可以让我在 <ul> 中实例化多个 ViewModel。 http://jsfiddle.net/mpqtsjhL/32/

Answer 1

老实说，你对 knockout 的使用并不符合预期。如果它真的是 ViewModel，那么创建一个 "host" MainViewModel 来管理其他 ViewModel

  var MainMenuViewModel = function () {
    this.viewModels = ko.observableArray();
    this.viewModels.push(new ViewModel1());

    this.load=function(){
        this.viewModels.push(new ViewModel1());
    };
}

查看更新 fiddle http://jsfiddle.net/r2hsvsdg/1/

顺便说一句，您还可以使用敲除处理点击逻辑

更好fiddle：http://jsfiddle.net/r2hsvsdg/4/

如何在没有 erasing/overwriting 任何旧绑定的情况下让我的 Knockout.js 组件附加到页面？

How can I make my Knockout.js components append to the page without erasing/overwriting any old bindings?

html

javascript

knockout.js

knockout-templating

knockout-components