问题描述:
创建淘汰赛视图模型TagsViewModel
可观察是我<code>Tags</code>(阵列某些字符串)</p> <p>对于每个<code>Tags</code>的集合只改变了一个视图模型
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,但在那里我无法重现我的问题。
有什么想法在我的情况是什么问题?
答
我会建议做类似下面的事情,它应该使它更容易管理。
可能有一个具体的原因,你绑定每个标签分别使用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 -->
这是一种很难帮你,如果你的提琴只是按预期工作......(你忘了,包括淘汰赛,虽然)。唯一容易出错的代码是重复调用'cleanNode'和'applyBindings'。虽然它不是错误的*,但通常最好创建一个包装视图模型和一些'with'或'foreach'绑定来访问您的单独组件。 – user3297291
@ user3297291,淘汰赛我已经添加为资源,而不是从jsfiddle下拉列表。关于包装 - 我想,但在我的情况下,它是棘手的,并造成一些错误... – demo