如何在不擦除/覆盖任何旧绑定的情况下将Knockout.js组件附加到页面

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

本文关键字：组件 js Knockout 情况下 擦除 绑定 任何旧 覆盖      更新时间：2023-09-26

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。

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

编辑：也许我必须去这个新的小提琴中的某个地方？也许这样的东西可以让我在<ul>中实例化多个ViewModel。http://jsfiddle.net/mpqtsjhL/32/

Tbh，您对淘汰的使用并不像预期的那样。如果它真的是ViewModels，那么制作一个"主机"MainViewModel来管理其他ViewModels

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

查看更新的fiddlehttp://jsfiddle.net/r2hsvsdg/1/

顺便说一句，你也可以使用敲除来处理点击逻辑

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

相关文章：