Skip to content Skip to sidebar Skip to footer
Home / Javascript / Knockout.js

How To Get This Simple One-way Binding With Knockout To Work?

Post a Comment
I am learning knockout and this is my first ever example of it, so please be gentle. I just want a one-way binding from the model to the textboxes, i.e, whatever is in the model mu

Solution 1:

If you don't pass rootElement to apply bindings, it's going to use window.document.body. However, if you script is loaded in head section, the body is not available at that moment. So you need to move your 1.js loading inside the body like this:

<html><head><metacharset="utf-8"/><scripttype='text/javascript'src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js'></script></head><body><formid = "frm"name = "frm"><fieldset><legend>Your friend's basic information</legend><div><labelfor = "FirstName">First Name</label><inputtype = "text"name = "FirstName"id = "txtFirstName"data-bind = "value: friend.firstName" /></div><div><labelfor = "LastName">Last Name</label><inputtype = "text"name = "LastName"id = "txtLastName"data-bind = "value: friend.lastName" /></div></fieldset></form><scripttype='text/javascript'src='1.js'></script></body></html>

Solution 2:

You will need to use mapping library to do that. When you use nested properties like a class you need to use mapping. check it out: Plugin Knockout Mapping

Your code wil be some like that:

var viewModel = function () {
var _vm = null,

init = function () {

    _vm = {
      friend : ko.mapping.fromJS({
        firstName : 'Sathyaish',
        lastName : 'Chakravarthy'
        }),
        change: function(){
        _vm.friend.firstName('first name changed');
        }
    };

    ko.applyBindings(_vm, $('#frm').get(0));
}

return {
    init: init
}

}();

i have that scenario all the time. I put in JSFIDDLE check it out

Post a Comment for "How To Get This Simple One-way Binding With Knockout To Work?"