javascript - Knockout click binding - 阻止除被点击元素之外的所有元素的绑定(bind)

Question

我对 knockout 中的点击绑定(bind)有疑问。我几乎找到了解决方案，但仍然不是我想要的。我对两个列表使用模板(模板相同)。在一个列表中，我几乎没有具有相同绑定(bind)的元素，一开始我可以点击任何按钮，但是当我点击某个元素时，我想阻止从一个列表中选择/点击其他项目的能力。例子会更好地解释:JS

function AppViewModel() {
    var self = this;
    self.people = ko.observableArray([
        { name: 'Bert', bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
        { name: 'Charles', bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
        { name: 'Denise', bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }
    ]);
    self.workers = ko.observableArray([
        { name: 'Bart', bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
        { name: 'Joey', bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
        { name: 'Daniel', bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }
    ]);
    self.checkVoice = function() {
      console.log('test');
    };
}

ko.applyBindings(new AppViewModel());

HTML

<h2>List one</h2>
<div data-bind="template: { name: 'person', data: people }"></div>
<h2>List two</h2>
<div data-bind="template: { name: 'person', data: workers }"></div>

<script type="text/html" id="person">
    <!-- ko foreach: $data -->
    <div data-bind="text: $data.name"></div>
    <button data-bind="click: $root.checkVoice">like</button>
    <button data-bind="click: $root.checkVoice">dislike</button>
    <!-- /ko --> 
</script>

link to fiddle

我的目标是:当我点击“Bert”名称的喜欢按钮时，我想关闭在这个列表中点击其余按钮的可能性，但我希望在第二个列表中有完全相同的可能性。这可以只使用一个模板来完成吗？现在我有这样的东西:

data-bind="click: function(data, event, type) { if(buttonClickedObservable()) { $root.checkAvailability($data, event, 'standard'); } }"

这个解决方案还不错，但关闭了点击两个列表的可能性，而不是只点击一个列表

Answer 1

我有点难以理解您的要求。但也许组件而不是模板可能更适合您的需求。使用一个组件，您将获得一个模板和一个 View 模型。

这是一把 fiddle https://jsfiddle.net/odygrxt8/4/

同样，我不太理解您关于禁用按钮的要求，但是如果您运行 fiddle ，则在任何给定列表中只有一个喜欢或不喜欢的事件。

这是您可能需要更改逻辑以满足您的实际要求的组件，但希望它能给您一个想法。

ko.components.register('like-widget', {
  viewModel: function(params) {
    var self = this;
    this.data = params.value;
    this.selectedName = ko.observable('');
    this.choice = ko.observable('');
    this.likeIt = function(row) {
      self.selectedName(row.name);
      self.choice('like');
    };
    this.dislikeIt = function(row) {
      self.selectedName(row.name);
      self.choice('dislike');
    };
  },
  template: ' <div data-bind="foreach: data">\
           <div data-bind="text: $data.name"></div>\
            <button data-bind="click: $parent.likeIt, css: {\'btn-danger\': ($data.name == $parent.selectedName() && $parent.choice() == \'like\')}" class="btn">like</button>\
             <button data-bind="click: $parent.dislikeIt, css: {\'btn-warning\': ($data.name == $parent.selectedName() && $parent.choice() == \'dislike\')}" class="btn">Dislike</button>\
         </div>'
});