2013-08-07 1 views
0

У меня есть этот JQuery:KnockoutJS получить JSON от удаленного источника с отображением плагин привязки проблема

$.ajax({url : sUrl, 
    dataType: "jsonp", 
    type: "GET", 
    contentType: "application/json;charset=utf-8", 
    headers: { "accept": "application/json;charset=utf-8" }, 
    error: function (a, b, c){ 
     alert(a); 
     alert(a.status); 
     alert(b); 
     alert(c); 
    }, 
    success: function (data) { 
     alert(data); 
     var viewModel = ko.mapping.fromJS(data); 
     alert(viewModel); 

     /*$.each(data, function (index, element) { 
      alert(index); 
      alert(element); 
     });*/ 
    } 
}); 

alert(data); дает мне это:

enter image description here Второе предупреждение дает мне:

function c(){if(0<arguments.length)return c.equalityComparer&&c.equalityComparer(d,arguments[0])||(c.K(),d=arguments[0],c.J()),this;a.q.bb(c);return d} 

.each пробег до индекса> 100, поэтому возвращается набор строк.

Вот небольшой кусочек моей JSON (когда я вручную ударил URL из var sUrl:.

([{ "0":"C551003", 
     "id":"57024", 
     "1":"0373", 
     "number":"373-NIK", 
     "2":"1349078013", 
     "date_time":"1349078192", 
     // etc. 
},{ // next item 

Я просто понятия не имеют, что лучший подход будет разобрать этот JSON в хороший стол я думал, что это даст мне массив строк в ViewModel и что я мог бы сделать что-то вроде этого: http://knockoutjs.com/documentation/foreach-binding.html , но я понятия не имею, если отображение работал и как я могу связать с, например, в number реквизита

<tbody data-bind="foreach: iHaveNoClue"> 
    <tr> 
     <td data-bind="text: 0"></td> 
     <td data-bind="text: id"></td> 
     <td data-bind="text: 1"></td> 
     <td data-bind="text: number"></td> 
     <td data-bind="text: 2"></td> 
     <td data-bind="text: date_time"></td> 
    </tr> 
</tbody> 
.

ответ

2

Запомните фронт: потому что у вас есть свойства, чье имя является числом, вам нужно будет перепрыгнуть через некоторые обручи, чтобы получить привязку привязки text. Один из способов - заменить text: 1 на text: $data['1'].


Вы на правильном пути. iHaveNoClue можно заменить $root, .e.g:

<tbody data-bind="foreach: $root"> 

См this fiddle для примера. Это работает, потому что сам viewModel будет сделан в observableArray плагином ko.mapping.


Альтернативное решение
Кроме того, вы можете создать модель представления, что просто держит элементы наблюдаемого массива с материалом вы получаете с просьбой AJAX. Ваше мнение модель может быть построена следующим образом:

var viewModel = { 
    title: ko.observable("My title"), 
    items: ko.mapping.fromJS(data) 
}; 

Смотрите this fiddle для демонстрации этой версии. В этом примере viewModel - это простой объект, но вы также можете создать функцию-конструктор, которая построит более сложную модель представления.

+1

Hi Jeroen, спасибо за ваш ответ. У меня был 'var viewModel = ko.mapping.fromJSON (data);' вместо 'var viewModel = ko.mapping.fromJS (data);' и я забыл 'ko.applyBindings (viewModel);'. Ваш '$ root' исправил это! Еще раз спасибо, сделал мой день! –

+0

Ow Я заметил небольшую ошибку. Свойства viewmodel, такие как 0,1,2, не обрабатываются в jsFiddle. Это не работает. –

+1

Ах, вы правы. Однако это отдельная проблема. Я обновил свой ответ и связал скрипты, чтобы учесть эту проблему. – Jeroen