Update-Feld mit Jquery aktualisieren nicht beobachtbar

Question

Ich möchte Hallo sagen, die Stackoverflow-Community.

Ich habe vor ein paar Tagen angefangen, Knockout zu verwenden.

Richtig weiß, ich verwende es, um einen dynamischen Menü Builder für ein CMS zu machen, an dem ich arbeite. Hier

ist der Code: http://jsfiddle.net/dnlgmzddr/HcRqn/

Das Problem ist, dass, wenn ich ein Element aus dem Auswahlfeld wählen, das Eingabefeld-Update, wie ich erwarten würde, aber die beobachtbare die Änderung nicht widerspiegeln. Aus diesem Grund ist die Schaltfläche zum Hinzufügen nicht aktiviert.

Was fehlt mir? Wie kann ich es reparieren?

Vielen Dank.

Answer 1

Wenn Sie das URL-Feld zu füllen, müssen Sie das Änderungsereignis auszulösen die beobachtbare erhalten werden upated. So könnten Sie tun:

$("#url").val('/pages/' + id).change(); 

Eine weitere Option aber, dass mehr in der K.-o.-Geist ist eine Bindung auf Ihrem wählen zu verwenden. In diesem Fall würden Sie wahrscheinlich eine Observable mit diesem Wert auffüllen und dann eine manuelle Subskription verwenden, um den formatierten Wert in das Eingabefeld einzugeben.

this.itemUrl = ko.observable(); 
this.selectedUrl = ko.observable(); 
this.selectedUrl.subscribe(function(newValue) { 
    if (newValue) { 
     this.itemUrl("/pages/" + newValue);     
    } 
}, this); 

Dann binden Sie Ihre wählen zu selectedUrl:

<select id="pagedList" data-bind="value: selectedUrl"> 
     <option value=""><option> 
     <option value="test">Test</option> 
    </select> 

Hier ist ein Beispiel ist: http://jsfiddle.net/rniemeyer/HcRqn/21/

Sie auch die zusätzliche beobachtbare und manuelle Abonnement beseitigen könnte, wenn der „Wert“ der Optionen war die URL.

Answer 2

Ich kann nirgends in Ihrem Code sehen, wo Sie tatsächlich die Schaltfläche aktivieren, wenn ein Feld ausgewählt ist. So könnte ich etwas vermissen, aber nur die Schaltfläche bei Änderung aktivieren. Wie folgt aus:

function LoadMenu() { 
    $("#pagedList").change(function() { 
     var id = $(this).val(); 
     $("#url").val('/pages/' + id); 
     // remove the disabled attribute here 
     $('button.space').removeAttr('disabled'); 
    }); 
}