Question

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

对于Tags中的每一个，我创建了knockout viewModel TagsViewModel

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

  vm.showTags = ko.observable(false);

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

我还有另一个“toggler”来在另一个局部视图中显示/隐藏标签。为此，我创建了单独的viewModel TagFiltersViewModel并使用knockout 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);

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

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

Answer 1

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

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

＆＃13;

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);

＆＃13;

<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 -->

＆＃13;

仅为一个viewModel更改了Observable

1 个答案: