可观察是我<code>Tags</code>（阵列某些字符串）</p> <p>对于每个<code>Tags</code>的集合只改变了一个视图模型

Question

创建淘汰赛视图模型TagsViewModel

var TagsViewModel = function() { 
    var vm = this; 

    vm.showTags = ko.observable(false); 

    window.shouter.subscribe(function(newValue) { 
    vm.showTags(newValue); 
    }, vm, 'toggleReviewTags'); 
} 

而且我还有一个“toggler”，以示/在另一个局部视图中隐藏标签。对于它，我已经创建了独立的视图模型TagFiltersViewModel和使用PubSub的淘汰赛与TagsViewModel

var TagFiltersViewModel = function() { 
    var vm = this; 

    vm.isTagsVisible = ko.observable(false); 

    vm.isTagsVisible.subscribe(function(newValue) { 
    window.shouter.notifySubscribers(newValue, 'toggleReviewTags'); 
    }); 

    vm.toggleTags = function() { 
    vm.isTagsVisible(!vm.isTagsVisible()); 
    } 
} 

每个TagsViewModel我绑定到容器计算ID沟通"tag-container-"+ {tagId}
并为每个做下一件事

var element = document.getElementById(tagModel.tagsContainer); 
ko.cleanNode(element); 
ko.applyBindings(new TagsViewModel(tagModel), element); 

问题 - 点击切换按钮后，只显示集合中的一个标签。我创建了jsFiddle，但在那里我无法重现我的问题。

有什么想法在我的情况是什么问题？

Answer 1

我会建议做类似下面的事情，它应该使它更容易管理。

可能有一个具体的原因，你绑定每个标签分别使用applyBindings方法，但你必须详细说明。

var arrayOfTags = ['tag1', 'tag2', 'tag3']; 
 

 
var ViewModel = function() { 
 
    var self = this; 
 

 
    // Return an array TagsViewModels using the map method 
 
    this.Tags = ko.observableArray(arrayOfTags.map(function(tag) { 
 
    return new TagsViewModel(tag); 
 
    })); 
 

 
    // Observable to track if all tags are hidden/shown 
 
    this.TagsVisible = ko.observable(true); 
 

 
    // Loop through tags, show and set flag to true 
 
    this.ShowTags = function() { 
 
    self.Tags().forEach(function(tag) { 
 
     tag.Visible(true); 
 
    }) 
 
    self.TagsVisible(true); 
 
    }; 
 

 
    // Loop through tags, hide and set flag to false 
 
    this.HideTags = function() { 
 
    self.Tags().forEach(function(tag) { 
 
     tag.Visible(false); 
 
    }) 
 
    self.TagsVisible(false); 
 
    }; 
 

 
}; 
 

 
var TagsViewModel = function(name) { 
 
    this.Name = ko.observable(name) 
 
    this.Visible = ko.observable(true); 
 
}; 
 

 
var model = new ViewModel(); 
 
ko.applyBindings(model);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 
<button data-bind="click: ShowTags, visible: !TagsVisible()">Show Tags</button> 
 
<button data-bind="click: HideTags, visible: TagsVisible">Hide Tags</button> 
 

 
<hr> 
 

 
<!-- ko if: Tags() --> 
 
    <!-- ko foreach: Tags --> 
 
    <span data-bind="text: Name, visible: Visible"></span> 
 
    <!-- /ko --> 
 
<!-- /ko -->