Блог

Я хочу отобразить логическое значение на странице (на самом деле это будут ячейки в таблице), и оно должно быть доступно для редактирования. Кроме того, это не флажок, но я прописываю «false» и «true». Мы используем bootstrap 3 и последнюю версию knockout. Я решил использовать x-editable Bootstrap 3 build. Я также использую пользовательскую привязку knockout: https://github.com/brianchance/knockout-x-editable .

Я понял, что для реализации этого мне нужно настроить x-editable на режим всплывающего окна и выбрать тип. Я также указываю параметры («true» и «false» только в этом случае) в параметре. Почти все в порядке и отлично, за исключением того, что диалоговое окно на месте не отображает текущее значение, когда оно появляется. Как я могу это исправить? Я попробовал параметр ‘defaultValue’, но это не помогло.

Вот скрипка: http://jsfiddle.net/csabatoth/7ybVh/4 /

 <span data-bind="editable: value,
      editableOptions: { mode: 'popup', type: 'select',
      source: '[{ value: 0, text: amp;#34;falseamp;#34; },
                { value: 1, text: amp;#34;trueamp;#34; }]' }">
</span>
  

простая модель:

 function ViewModel() {
    var self = this;
    self.value = ko.observable(false);
}
  

Проблема в том, что у вас есть true false логические значения и в вашем observable, но x-editable использует значения 0 и 1 для представления выбора «true» и «false».

Это вызывает две проблемы:

• при инициализации x-editable не знает, что «false» означает 0, поэтому значение по умолчанию не выбрано
• если вы выберете что-либо в своем всплывающем редакторе, ваш value наблюдаемый объект будет содержать строки «0» и «1» false , а не true логические значения and …

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

 self.computed = ko.computed({
    read: function() { return self.value() ? 1 : 0 },
    write: function(newValue) { self.value(newValue == '1') }
});
  

И вам нужно использовать это свойство в вашей editable привязке:

 <span data-bind="editable: computed,
      editableOptions: { mode: 'popup', type: 'select',
      source: '[{ value: 0, text: amp;#34;falseamp;#34; },
                { value: 1, text: amp;#34;trueamp;#34; }]' }">
</span>
  

Демонстрационный JSFiddle.