Update Event on Custom Binding Not Triggered

Question

this is my html : Hi, Guys,

I am new bie on knockoutjs world, but i am feeling very interested to use it in my next project because it seems it is a powerfull framework. But i a having some obstacles to understand on how the knockoutjs custom binding works because i was fail to make it works on my own codes. So actually i did some small experiment on my own like the codes below:

This my code on my html file:

<form id="form1" runat="server">
<div data-bind="schoolCalendar: student">        
</div>
    <br />
    <input type="button" data-bind="click: change" value="Click"/>
</form>

this is my javascript :

    var student = function (firstname, lastname, age) {
        self = this;
        self.firstname = ko.observable(firstname);
        self.lastname = ko.observable(lastname);
        self.age = ko.observable(age);
    }

    var model = function (student) {
        self = this;
        self.student = ko.observable(student);
        self.change = function () {
            self.student.firstname = "Virna";
            self.student.lastname = "Patel";
            self.student.age = 27;
        };
    }

    ko.bindingHandlers.schoolCalendar = {
        update: function (element, valueAccessor, allBindingsAccessor, viewModel, context) {
            var root = $(element);
            var value = valueAccessor();
            var valueUnwrapped = ko.utils.unwrapObservable(value);
            var allBindings = allBindingsAccessor();
            var html = "<span id=\"firstname\">Firstname is " + valueUnwrapped.firstname() + "</span><br/>";
            html += "<span id=\"lastname\">Lastname is " + valueUnwrapped.lastname() + "</span><br/>";
            html += "<span id=\"age\">Age is " + valueUnwrapped.age() + "</span><br/>";
            root.append(html);

            ko.applyBindingsToNode($("firstname").get(0), valueUnwrapped.firstname());
            ko.applyBindingsToNode($("lastname").get(0), valueUnwrapped.lastname());
            ko.applyBindingsToNode($("age").get(0), valueUnwrapped.age());

            return ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor, viewModel, context);
        }
    };

    $(document).ready(function () {
        var m = new model(new student("John", "Hadikusumo", 43));
        ko.applyBindings(m);
    });

My question is : why when i click the button, it doesnt trigger the update event on knockoutjs bindingHandler. What did i do wrong ?

Answer 1

I think your custom handler isn't firing because your model.change function is not using the correct syntax for working with ko observables. You need to use () when getting or setting their value.

self.change = function () {
            self.student().firstname("Virna");
            self.student().lastname("Patel");
            self.student().age(27);
        };

You may be able to do away with the custom binding handler altogether though. You can accomplish the same functionality with the code below (no custom handler). Working fiddle here

HTML

<div data-bind="with: student">
    Firstname is <span id="firstname" data-bind="text: firstname"></span><br />
    Lastname is <span id="lastname" data-bind="text: lastname"></span><br />
    Age is <span id="age" data-bind="text: age"></span>
</div>
    <br />
    <input type="button" data-bind="click: change" value="Click"/>

JS

var student = function (firstname, lastname, age) {
    self = this;
    self.firstname = ko.observable(firstname);
    self.lastname = ko.observable(lastname);
    self.age = ko.observable(age);
};

var model = function (std) {
    self = this;
    self.student = ko.observable(std);
    self.change = function () {
        self.student().firstname("Virna");
        self.student().lastname("Patel");
        self.student().age(27);
    };
};

var m = new model(new student("John", "Hadikusumo", 43));
ko.applyBindings(m);