CODEWITHSUNDEEP
knockout.js
Pascal
Pascal

Reputation: 12885

KnockoutJs does disable my input image but not enable

I have 2 questions about my code:

Why is input image disabled (no hand cursor on hovering) but when the TreeDiv has any element (tree exists) and a node is selected the input image is still disabled. Its not getting enabled.

Why this?

I would also like to know why I need the viewmodel instance its used nowhere... (thats code from the authors site)

<input type="image" id="CreateSiblingUnit" data-bind="value: selectedUnit,enable: isUnitSelected"  src="~/Content/Images/unitaddsibling.png" title="Create sibling unit"  data-url="@Url.Action("CreateSibling", "Unit")" />

var viewModel = {
                isUnitSelected: ko.observable(false),
                selectedUnit: $('#TreeDiv').children().length > 0 && $("#TreeDiv").dynatree("getActiveNode") != null
            };

ko.applyBindings(viewModel);

Upvotes: 0

Views: 467

Answers (1)

Matt Wilson
Matt Wilson

Reputation: 8319

In your view model,

isUnitSelected: ko.observable(false),

defines isUnitSelected as an observable with an initial value of false, but I can't see anything that would ever set it to true. Your binding (enable: isUnitSelected) will therefore cause it to be disabled until something alters the value of isUnitSelected.

I'm a bit confused by your two properties in the view model. The first will always be false, and the second will be a boolean, so the name "selectedUnit" doesn't make much sense.

I'm not sure what dynatree is, but I'd imagine you probably need to bind to some kind of event (when a node is selected etc), and set the properties in your view model accordingly. E.g.

// In your view model:
isUnitSelected: ko.observable(false),
selectedUnit: ko.observable()

// In some event handler, update the view model's properties each time a node is clicked
var hasNodes = ($('#TreeDiv').children().length > 0);
var activeNode = null;
if (hasNodes) {
    activeNode = $("#TreeDiv").dynatree("getActiveNode");
}
selectedUnit(activeNode);
isUnitSelected(hasNodes && activeNode !== null);

The viewModel is used in the line:

ko.applyBindings(viewModel);

In this case your viewModel is just a basic Javascript object. You could also use the slightly more complex (but ultimately more useful) syntax like so, which would allow you to create an instance of a view model "object":

var ViewModel = function() {
    var self = this;

    self.isUnitSelected = ko.observable(false);
    //...
}

ko.applyBindings(new ViewModel());

Upvotes: 2

Related Questions