Как передать observableArray в шаблон, используя данные

Question

Я пытаюсь передать observableArray в шаблон:

<code><template id="my-template">
    <pre data-bind="text: JSON.stringify($data)">

<! - печатает: {isWarning: false} - />

Похоже, что массив observableArray нельзя передать как данные. Я пытался позвонить с ():

template: { 
   name: my-template, 
   data: { errors: myObservableArray(), isWarning: false }
}

Это печатает { errors: [], isWarning: false }.

Однако я хочу передать ObservableArray, а не Array в шаблон.

Возможно ли это без изменения JS?

Answer 1

Ваш код почти идеален, я просто поместил имя шаблона в '' и передал ваш массив с (), чтобы передать оцененное значение. Это сработало.

function VM(){
var self = this;
self.myObservableArray = ko.observableArray(["error1","error2","error3","error4","error4"]);
self.isWarning = ko.observable(false);
}

ko.applyBindings(new VM())

Answer 2

ObservableArray правильно передается в шаблон. Причина, по которой это не печатается, заключается в том, что JSON.stringify возвращает неопределенное значение для наблюдаемых нокаутов, которые не отображаются в элементе pre. Чтобы пример работал, используйте ko.toJSON. Посмотрите на фрагмент ниже:

ko.applyBindings({ 
  myObservableArray: ko.observableArray(['error 1', 'error 2', 'error 3'])
});

  <!-- ko foreach: errors -->
  
  <!-- /ko -->
  

Answer 3

Я предполагаю, что это проблема с вашим контекстом привязки . Я часто считаю бесценным оставлять следующий отладочный фрагмент непосредственно перед закрывающим тегом </body> во время разработки, удаленным / закомментированным во время развертывания. Это отобразит все, что нокаут «знает» о вашем приложении, особенно то, что было передано в .applyBindings(...). Особенно здесь важна иерархия ценностей.

<code><pre data-bind="text: ko.toJSON($root)">

То, что вы пытаетесь сделать, вполне возможно. Вот пример , демонстрирующий это. Обратите внимание на $data.myObservableArray. Использование $data здесь запрашивает значение из текущего контекста привязки.

В качестве архитектурного предложения я бы рекомендовал использовать компонентов над шаблонами практически во всех случаях. Они обеспечивают большую возможность повторного использования, асинхронную обработку и сегментацию проблем.