Блог

Главная - Вопросы по программированию - Как динамический рендеринг данных после ajax с knockout.mapping.js ?

Как динамический рендеринг данных после ajax с knockout.mapping.js ?

#knockout.js #knockout-mapping-plugin

#knockout.js #нокаут-сопоставление-плагин

Вопрос:

Я использую knockout.js amp; knockout.mapping.js . Я меняю ресурс данных на ajax, данные не могут обновляться динамически.

Потому что в реальном проекте я хочу настраивать html-модули без изменения js-кода, а данные не являются точными, поэтому структура данных сложная и динамичная. Две главные цели, которых я хочу достичь:

1, многоуровневые данные, поэтому я использую knockout.mapping, но это не работает. Вот один из примеров: http://jsfiddle.net/8uKaL /

2, динамический источник, ресурсы могут быть есть data2, data3, ... , и я могу легко изменить исходную ссылку из data2 в data3 , поэтому я подумал, что мне следует использовать что-то вроде <div data-bind="foreach: resources_ajax(key)" data-key="data1"> в html.

Есть ли какое-нибудь решение?

Спасибо.

Ответ №1:

Вам нужно подумать об этом по-другому. Knockout — это привязка модели к DOM, которая будет обновлять DOM от вашего имени. Похоже, вы пытаетесь «вызвать модель» из DOM

Обновил ваш код, чтобы показать пример, ключевую часть:

 .done(function(data) {
      data.data1 = JSON.parse(data.data1); // this line just for fix fake ajax request
      self.resources_ajax(data.data1);
  });

JSFiddle:

http://jsfiddle.net/m389e/

Комментарии:

1. Спасибо за ответ. Но в моем проекте я хочу настроить html-модули без изменения js-кода, и данные не являются достоверными. Две основные цели, которых я хочу достичь: 1, динамический источник, ресурсы могут быть data2 , data3 , и я могу легко изменить исходную ссылку с data2 на data3 , поэтому я хочу использовать data-key в html. 2, многоуровневый, поэтому я использую knockout.mapping.

2. @Fancyoung это те детали, которые вам нужно указать в своем вопросе (желательно как можно скорее), чтобы у людей были все ключи для помощи

Ответ №2:

Что вам нужно сделать, так это сначала создать пустой массив data1. http://jsfiddle.net/8uKaL/4 /

 // this will create resources_ajax.data1 as ko.observableArray()
self.resources_ajax = ko.mapping.fromJS({data1: []});

В противном случае, в вашем исходном коде, перед ajax, в вашей привязке foreach , ko будет видеть resources_ajax.data1 как undefined , и ko никогда не узнает, что вы позже создали ключ data1 в resources_ajax .

То, что ko может «наблюдать», — это изменение содержимого resources_ajax.data1, а не создание ключа data1 для объекта resources_ajax.

Обновить

Но приведенное выше решение не решает ваш динамический вариант использования.

Вот метод, позволяющий ko воссоздать DOM после ajax. http://jsfiddle.net/8uKaL/6 /

оберните DOM в наблюдаемый флаг loading , перед ajax установите loading значение true , после ajax установите loading значение false , это заставит ko повторно проанализировать внутреннюю привязку и заново создать DOM.

Метки: