Observable 仅针对一个视图模型进行更改答案

【问题标题】：Observable is changed only for one viewModelObservable 仅针对一个视图模型进行更改
【发布时间】：2017-10-19 12:28:39
【问题描述】：

我收集了Tags（一些字符串的数组）

对于Tags 中的每一个，我都会创建淘汰视图模型TagsViewModel

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

  vm.showTags = ko.observable(false);

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

我还有另一个“切换器”可以在另一个局部视图中显示/隐藏标签。为此，我创建了单独的 viewModel 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，但我无法重现我的问题。

有什么想法我的问题是什么？

【问题讨论】：

如果您的小提琴按预期工作，那么很难帮助您...（尽管您忘了包括淘汰赛）。唯一容易出错的代码是对cleanNode 和applyBindings 的重复调用。虽然它没有错误，但通常最好创建一个包装视图模型和一些with 或foreach 绑定来访问您的单独组件。
@user3297291，淘汰赛我已添加为资源，而不是来自 jsfiddle 下拉列表。关于包装器 - 我想要，但在我的情况下它很棘手并且会导致一些错误......

标签： javascript knockout.js publish-subscribe

【解决方案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 -->

【讨论】：