Текст опции становится функциональной строкой после обновления с помощью jS

Question

Почему текст опции преобразуется в строку функции после того, как значения были обновлены с ko.mapping.fromJS?

Пример: http://jsfiddle.net/tYnc6/24/

Html:

<div> 
    <select data-bind="options: items, value: selected, optionsText: function(item) { return ('[' + item.Id + '] ' + item.Name) }, optionsCaption: 'Choose...'"></select> 
    <button data-bind="click: update">Update</button> 
</div> 

Javascript:

var mapping = { 
     key: function(data) { 
      return ko.utils.unwrapObservable(data.Id); 
    } 
}; 

viewModel = { 
    items: ko.observableArray([ 
     {Name: 'foo', Id: '1'}, 
     {Name: 'bar', Id: '2'} 
    ]), 
    selected: ko.observable(), 

    update: function() { 
     data = [ 
      {Name: 'foo', Id: '1'}, 
      {Name: 'bar', Id: '2'}, 
      {Name: 'baz', Id: '3'} 
     ]; 
     ko.mapping.fromJS(data, mapping, this.items); 
    } 
} 
ko.applyBindings(viewModel); 

Обратите внимание, что после обновления была нажата кнопка текст опция становится функцией.

Answer 1

Данные, которые были переданы через плагин картографии, теперь превратились в наблюдаемые Name и Id. Итак, когда ваша функция делает '[' + item.Id + '] ' + item.Name, вы объединяете строки с наблюдаемыми (которые являются функциями).

Если Name и Id всегда наблюдаемый, то вы хотели бы сделать:

'[' + item.Id() + '] ' + item.Name()

Если вы хотите поддержать или наблюдаемые или ненаблюдаемые, то вы могли бы сделать что-то вроде:

'[' + ko.utils.unwrapObservable(item.Id) + '] ' + ko.utils.unwrapObservable(item.Name)

ko.utils.unwrapObservable будет правильно возвращать значение для наблюдаемого или не наблюдаемого.