Question

我目前有一个带有数据绑定foreach语句的div。在这个div里面是一个使用'click：$ parent.loadWebcam'的按钮。所有这些工作和loadWebcam函数被称为传递来自foreach的数据并处理按下了哪个按钮。

我想要完成的是以相同的方式使用enable data-bind。我希望它将数据从父级传递给一个名为“isButtonEnabled”的函数，但是，它似乎并没有像我希望的那样工作。这是我为isButtonEnabled构建的函数，我错过了什么？或者是否可以不以这种方式使用enable data-bind？

var currentStream = "";
self.isButtonEnabled = function(profile) {
    return ko.observable(ko.toJS(profile).URL != currentStream);
};

页面上的snipplet如下：

<div class="jog-panel" id="camControl">
    <h1>Webcams</h1>
    <div data-bind="foreach: settings.settings.plugins.multicam.multicam_profiles">
        <button class="btn btn-block control-box" data-bind="click: $parent.loadWebcam, text: name, enable: $parent.isButtonEnabled">Default (before bind)</button>
    </div>
</div>

谢谢

Answer 1

我建议，因为要在单击按钮时更新启用状态，所以将该逻辑添加到click事件中而不是具有单独的功能。 isButtonEnabled可以是普通的可观察变量而不是函数，并且该变量由click事件更新。

  self.loadWebcam = function(profile) {
      profile.isButtonEnabled(ko.toJS(profile).URL != currentStream);
      console.log(ko.toJS(profile).URL);
  };

var currentStream = "test url";

function viewModel(){
	var self = this;
  var profile1 = { URL: 'test url', name: 'test profile', isButtonEnabled: ko.observable(true) }; //test data
  var profile2 = { URL: 'other url', name: 'other profile', isButtonEnabled: ko.observable(true) }; //test data
  
  self.multicam_profiles = ko.observableArray([profile1, profile2]);
  
  self.loadWebcam = function(profile) {
      profile.isButtonEnabled(ko.toJS(profile).URL != currentStream);
      console.log(ko.toJS(profile).URL);
  };
}

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

currentStream: "test"

<div class="jog-panel" id="camControl">
    <h1>Webcams</h1>
    <div data-bind="foreach: multicam_profiles">
        <button class="btn btn-block control-box" data-bind="click: $parent.loadWebcam, text: name, enable: isButtonEnabled">Default (before bind)</button>
    </div>
</div>

Knockout - 具有启用功能的Foreach功能

1 个答案: