如何使我的Knockout.js組件追加到頁面上而不擦除/覆蓋任何舊的綁定？

Question

小提琴： 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。

所需功能：當用戶單擊按鈕加載新的Viewmodel時，將添加那些新的列表元素<li>而不是替換現有的列表元素。 怎么樣？？ 在小提琴中 ，一個列表中總共應該有6個列表元素。

編輯：也許我必須沿着這個新提琴演奏的路線走些走？ 也許這樣的事情會讓我實例化<ul>多個ViewModel。 http://jsfiddle.net/mpqtsjhL/32/

Answer 1

Tbh，您對淘汰賽的使用並不像預期的那樣。 如果確實是ViewModel，則創建一個“主機” MainViewModel來管理其他ViewModel。

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

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

看到更新的提琴http://jsfiddle.net/r2hsvsdg/1/

順便說一句，您還可以使用剔除處理點擊邏輯

更好的小提琴： http : //jsfiddle.net/r2hsvsdg/4/