javascript - i'm not seeing knockout value coming through onto my bound textfield -

javascript - i'm not seeing knockout value coming through onto my bound textfield -

i have next code although i'm not seeing value of firstname coming through onto form textbox? can see in firebug value correct? help much appreciated!

firebug - console window

pagemodel.firstname() // shows value: 'jane'

html

<input id="firstname" name="firstname" data-bind="value: pagemodel.firstname'" />

js

$(function() { pagemodel = (function() { var init = function(data) { this.firstname = ko.observable(data.member.firstname); ... ... }; homecoming { init: init }; // revealing module pattern })(); ko.applybindings(pagemodel); var servermodel = <%=viewdata.model.tojson() %>; pagemodel.init(servermodel); });

json object

{"member":{firstname: 'jane'}}

there couple of problems there:

you're applying bindings before initialize view model. if open web console, you'll see error ko saying has no thought pagemodel is.

even 1 time initialize model, still doesn't have pagemodel property. firstname property.

you have ' @ end of binding.

separately, code falling prey the horror of implicit globals because you're not declaring pagemodel anywhere.

some fixes:

$(function() { // added `var` here var pagemodel = (function() { var init = function(data) { this.firstname = ko.observable(data.member.firstname); ... ... }; homecoming { init: init }; // revealing module pattern })(); var servermodel = <%=viewdata.model.tojson() %>; pagemodel.init(servermodel); // moved end ko.applybindings(pagemodel); });

and in html:

<input id="firstname" name="firstname" data-bind="value: firstname" /> <!-- no `pagemodel.` here -------------------------------^ ^ no single quote here ---------------------------------------/ -->

live example (source)

if want apply bindings before calling pagemodel.init, you'll need create firstname observable, , later in init update observable using data argument (rather creating new one).

javascript design-patterns knockout.js