How to access property on object in viewmodel from html code?

Question

I hava a viewmodel as follow :

define(
    [\'jquery\', \'knockout\', \'knockout.mapping\', \'data/data\', \'models/models\'],
    function ($, ko, mapping, data         


        

Answer 1

Not sure when that you are applying bindings, but it appears that at the time of binding, you are just binding against the empty object. Then, when your AJAX request finishes, it adds the observables, but since post itself isn't observable, the UI does not update.

You could consider calling applyBindings after your request finishes like:

var vm = {
    post: ko.observable()
};    

//simulate AJAX
setTimeout(function() {
    vm.post(ko.mapping.fromJS({ title: "hello" }));    
}, 500);

ko.applyBindings(vm);

Then bind against it like:

<section id="section-post-detail" class="view" >
    <div data-bind="with: post" class="page-header">
        <h3 data-bind="text: $data.title"></h3> 
    </div>
</section>​​​​​​​​​

​

Answer 2

I think the problem is that you are initially creating your viewmodel as an empty object, like this:

var post = {};

And then you are trying to update the viewmodel, like this:

mapping.fromJS(result, {}, post);

However, the documentation for the mapping plugin at http://knockoutjs.com/documentation/plugins-mapping.html seems to indicate that you should create the viewmodel like this:

var viewModel = ko.mapping.fromJS(data);
// or, in your case
var post = ko.mapping.fromJS(result);

Then, when you need to call the server to get updated data, you can do this:

ko.mapping.fromJS(data, viewModel);
// or, in your case
ko.mapping.fromJS(result, post);

The important thing to consider, which I think RP was driving at, is that you can't create the viewmodel until after you have the data.