KnockoutJS + Chosen setzen meinen beobachtbaren Wert zurück, nachdem ich ihn gesetzt habe

Question

Also ich baue dieses Diagramm Gebäude ui. Sie können Felder aus einer Datenbank auswählen, um ein Diagramm zu erstellen. und die Graphen haben ein Auffrischintervall Dropdown.

alles funktioniert gut, bis ich versuche, einen Wert aus einer gespeicherten "Ansicht" zu laden der Wert wird gesetzt, wie ich sehen kann, wenn ich ein Abonnement der Variable RefreshInterval hinzufügen.

aber es wird sofort auf den 0'd-Index meines Optionsarrays zurückgesetzt.

[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")); 

Ich habe eine Geige hier: Fiddle

Ich habe 3 dieser Drop-Down-Boxen, die müssen bevölkert sein. Ich möchte, dass der Wert das tatsächliche Element und kein Wertfeld ist, das ich dann mit dem tatsächlichen Objekt in der Optionsliste vergleichen muss, da sich die Optionsliste ändern kann.

Irgendwelche Hinweise, wie ich das lösen kann?

Answer 1

Der Wert Attribut auf dem <select> nicht richtig erzeugt wurde, Sie Notwendigkeit optionsValue: 'Value' auf Ihre Bindung

Grundsätzlich hinzufügen es eine Beschränkung in Knockout ist, dass Sie nicht einen ausgewählten Wert an die Verpackungs Objekt binden kann .

Aufgrund dieser Einschränkung der einzige Weg, um die gewünschte Option programatiicaly gesetzt ist:

vm.RefreshInterval("10 seconds"); 

Der berechnete wird natürlich den String-Wert zurückgeben, anstatt das gesamte Objekt. Dann können Sie das tun, um das Objekt zu erhalten. (Oder benutzt Strich oder lodash den Code zu machen sieht ein bisschen elegant)

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); 
); 

Hinweis Sie auch optionsValue: 'Value', benötigen

Aktualisiert working fiddle