Отображение нокаута - делает наблюдаемыми только некоторые свойства массива observableArray - PullRequest
Новая
       25

Отображение нокаута - делает наблюдаемыми только некоторые свойства массива observableArray

0 голосов
/ 26 июня 2018

Как настроить код ниже, чтобы ТОЛЬКО свойство "viewNotes" стало видимым?

У меня есть требование прочитать данные с сервера и применить их к ObservableArray. Из всех свойств данных ТОЛЬКО свойства viewNotes должны быть наблюдаемыми. Все остальное не требует двухсторонней привязки данных.

Вот данные, которые поступают с сервера: 

var data = [
  {
    "itemName": "Item 1",
    "notes": "This is item 1",
    "viewNotes": false
  },
  {
    "itemName": "Item 2",
    "notes": "This is item 2",
    "viewNotes": false
  }
]

Затем я привязываю данные к странице следующим образом. Идея состоит в том, что данные представлены, но свойство «примечания» скрыто, если пользователь не щелкнет его для просмотра. Этот переключатель видимости связан со свойством viewNotes - следовательно, он должен быть наблюдаемым, тогда как больше ничего не делает. 

<div data-bind="foreach: items">
  <div data-bind="text: itemName"></div>
  <button data-bind="click: $parent.viewTheNotes">View Notes</button>
  <div data-bind="if: viewNotes">
    <div data-bind="text: notes"></div>
  </div>
  <hr>
</div>

Проблема в том, что я не могу настроить подключаемый модуль отображения для переноса данных в observableArray, используя только свойство viewNotes для каждого элемента массива в качестве наблюдаемого. Вот мой код: 

var mapping = {
  "include": ["viewNotes"]
};

ko.mapping.fromJS(data, mapping, self.items);
alert("is viewNotes observable: " + ko.isObservable(self.items()[0].viewNotes));
alert("is itemName observable: " + ko.isObservable(self.items()[0].itemName));

Как видите, в окнах предупреждений говорится, что все под-свойства каждого элемента массива, по-видимому, сопоставлены с наблюдаемыми.

Как я могу настроить его так, чтобы можно было наблюдать только свойства viewNotes?

Вот скрипка, которая показывает проблему: https://jsfiddle.net/gxreh8sy/27/

1 Ответ

0 голосов
/ 26 июня 2018

Опция, которую вы ищете, это опция "наблюдения". От http://knockoutjs.com/documentation/plugins-mapping.html:

Если вы хотите, чтобы подключаемый модуль создавал только наблюдаемые некоторые свойства вашего объекта JS и скопировать остальные, вы можете указать массив имен свойств для наблюдения: 

var mapping = {
    'observe': ["propertyToObserve"] } var viewModel = ko.mapping.fromJS(data, mapping);
}

Однако в вашем случае это свойство не существует на корневом уровне, потому что оно находится на каждом дочернем элементе массива элементов. Таким образом, вы можете либо зациклить сначала и отобразить каждый элемент массива в цикле, либо вы можете использовать опцию отображения «создать» с функцией обратного вызова, чтобы указать подотображение для каждого дочернего объекта. 

var mapping = {
    create: function(options){
        return ko.mapping.fromJS(options.data, {observe: "viewNotes"});
    }
};
...