Knockout - Foreach function with enable function

Question

I currently have a div with a data-bind foreach statement. Inside this div is a button that uses the 'click: $parent.loadWebcam'. All of that works and the loadWebcam function is called passing the data from the foreach and processing which button was pressed.

What i am trying to accomplish is using the enable data-bind in the same way. I would like it to pass the data from the parent to a function called 'isButtonEnabled' however, it does not seem to be working the way i had hoped. Here is the function i built for isButtonEnabled, am i missing something? or can the enable data-bind just not be used in this way?

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

and the snipplet from the page is below:

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

Thank you

What data are you getting in the isButtonEnabled function for the profile argument? Does the function get hit at all? — Jason Spake
As of right now it doesnt even seem to be called, or at least it doesnt show any console.log messages. I know from my click data-bind though that it gets a knockout array containing a name and URL for the button that was clicked. — Michael Morris
The enable binding is meant more for controlling whether the DOM element is updateable based on a boolean observable value in your model. As you have it configured now I'm not sure when the function would get called. When would you expect the function to fire? What user action should cause a change to the enabled status? — Jason Spake
I would expect it to change each time one of the buttons is pressed. That is when i update my value for currentStream at least. The point of this is to have the button that has the same URL value as currentStream to be disabled as that stream will have already been loaded. — Michael Morris

Jason Spake Jason Spake · Accepted Answer · 2018-05-09T18:03:00

I would suggest, since you want to update the enabled status when the button is clicked, that you add that logic into the click event instead of having a separate function. The isButtonEnabled can be a normal observable variable instead of a function, and that variable gets updated by the click event.

  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 function with enable function

1 Answers