Dynamic View Model

Question

Как вы создаете динамическую модель вида из объектов JS, возвращаемых через Ajax?

При создании наблюдаемого объекта и наблюдаемого массива представление не содержит данных, если они не связаны после каждого получения, заставляя оповещение связываться несколько раз.

Моего JS

var SummaryData = { 
    Summary: { 
    Count: 4 
    } 
}; 

var DetailsData = { 
    Status: [{ 
    Name: "One", 
    Type: 1 
    }, { 
    Name: "Two", 
    Type: 1 
    }, { 
    Name: "Three", 
    Type: 0, 
    Taco: "True" 
    }] 
}; 
var self = this; 
self.Summary = new ko.observableArray([]); 
self.Details = ko.observable(); 
self.Load = function() { 

$.ajax({ 
     url: "/echo/json/", 
     data: SummaryData, 
     type: "GET", 
     success: function (data) { 
     // Map the returned JSON to the View Model 
     self.Summary = ko.mapping.fromJS(data.Summary); 
     } 
}) 
$.ajax({ 
     url: "/echo/json/", 
     data: DetailsData, 
     type: "GET", 
     success: function (data) { 
     // Map the returned JSON to the View Model 
     self.Details = ko.mapping.fromJS(data.Status); 
     } 
}) 

Моего HTML:

<span data-bind="text: Summary.Count"></span> 
<table data-bind="foreach: Details"> 
    <tr> 
     <td data-bind="text: Name"></td> 
     <td><button data-bind="click: $root.Clicked"></button></td> 
    </tr> 
</table> 

http://jsfiddle.net/atwoodkevin/q8EKP/40/

Answer 1

Ключа для инициализации наблюдаемых и благоразумно использовать привязки (например, как with, if и foreach), что не будет привязывать дочерние элементы до тех пор, пока не будет установлено ненулевое значение в наблюдаемом. Установите наблюдаемые значения (используя форму()) вместо переопределения, когда вы получаете данные через AJAX. Отображение прямые массивы (т.е. не внедренные в объекте) могут быть несколько иначе, инициализируются вызов ko.mapping с пустым массивом, а затем обновить отображение с ko.mapping.fromJS(data.Status, self.Details)

Две других точками:

Поскольку вы проходите View.Load() в ko.applyBindings что вы должны вернуть свой ViewModel из этого метода.

Ваш обработчик Clicked должен находиться внутри ViewModel.

-

Вот функционирование скрипку: http://jsfiddle.net/jearles/q8EKP/43/