KnockoutJS + Chosen сбрасывает мое наблюдаемое значение после того, как я его установил

Question

Так что я строю это здание диаграммы ui. вы могли бы выбрать поля из базы данных для построения графика. и графики имеют раскрывающийся список интервалов обновления.

все работает хорошо, пока я не пытаюсь загрузить значение из сохраненного «представления» значение становится установленным, как я могу видеть, когда добавляю подписку на переменную RefreshInterval.

, но он мгновенно получает сброс в 0-й индекс моего массива опций.

[HTML]

<div class="wrapper wrapper-content" id="charts"> 
    <select id="interval" data-bind="options: RefreshIntervals, 
    optionsText: 'Value', 
    value: RefreshInterval, 
    chosen: { 
     disable_search_threshold: 0, 
     width:'175px', 
     no_results_text: 'No results!', 
     placeholder_text_single: 'Select an interval', 
     search_contains: true, 
    }"> 
    </select> 
</div> 

[JavaScript]

function ViewModel() { 
    var self = this; 
    this.RefreshIntervals = ko.observableArray([ 
       new Interval(0, "Never"), new Interval(10, "seconds"), new Interval(1, "minutes"), new Interval(5, "minutes") 
      ]); 
    this.RefreshInterval = ko.observable(new Interval(5, "minutes")); 
}; 

var Interval = (function() { 
    function Interval(length, measurement) { 
    var _this = this; 
    this.Length = 0; 
    this.Measurement = ""; 
    this.Value = ""; 
    this.TimeoutValue = 0; 
    this.GetTimeoutValue = function() { 
     switch (_this.Measurement) { 
     case "seconds": 
      return _this.Length * 1000; 
     case "minutes": 
      return _this.Length * 60000; 
     default: 
      return 0; 
     } 
    }; 
    this.Length = length; 
    this.Measurement = measurement; 
    if (length == 0 || measurement == "Never") { 
     this.Value = "Never"; 
    } 
    else { 
     this.Value = this.Length + " " + this.Measurement; 
    } 
    this.TimeoutValue = this.GetTimeoutValue(); 
    } 
    return Interval; 
}()); 

ko.bindingHandlers.chosen = 
{ 
    init: function (element, valueAccessor, allBindings) { 
     $(element).chosen(valueAccessor()); 

     // trigger chosen:updated event when the bound value or options changes 

     $.each('value|selectedOptions|options'.split("|"), function (i, e) { 
      var bv = allBindings.get(e); 
      if (ko.isObservable(bv)) { 
      bv.subscribe(function() { 
       $(element).trigger('chosen:updated'); 
      }); 
      } 
     }); 
    } 
}; 
var vm = new ViewModel(); 
ko.applyBindings(vm, document.getElementById("charts")); 

У меня есть скрипка здесь: Fiddle

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

Любой ключ, как я могу это решить?

Answer 1

Значение атрибута на <select> не генерируется надлежащим образом, нужно добавить optionsValue: 'Value' к вашему связывании

В принципе существует ограничение в нокаут, что вы не можете связать выбранное значение объекта оберточной ,

Из-за этого ограничения единственный способ programatiicaly установить параметр, который является:

vm.RefreshInterval("10 seconds"); 

Вычисленное будет, конечно, возвращает строковое значение, а не весь объект. Тогда вы можете просто сделать это, чтобы получить объект. (Или используйте подчеркивание или lodash, чтобы сделать код выглядеть немного более элегантный)

this.RefreshInterval.subscribe(function(newValue){ 
var obj = null; 
for(var i=0; i<self.RefreshIntervals().length; i++) { 
    var interval = self.RefreshIntervals()[i]; 
    if(interval.Value === newValue) { 
    obj = interval; 
    break; 
    } 
} 
console.log(obj); 
); 

Примечание Вы также будете нуждаться в optionsValue: 'Value',

working fiddle Обновлено