可觀察是我<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 -->