2012-10-01 7 views
11

Ich habe dieses Dropdown-Optionen, wenn das Fahrzeug neu oder gebraucht ist.Ändern beobachtbaren Wert auf Dropdown-Änderung Knockout Js

<select name="VehicleType" id="vehicleTypeDropdown" data-bind="value: VehicleType">  
    <option value="New" selected="selected">Nuevo</option> 
    <option value="Used">Usado</option> 
</select> ` 

Und dieser Eingang:

<input type="text" name="Mileage" data-bind="disable: VehicleType() === 'New',value: Mileage" class="input-large"> ` 

Wenn der Wert in dem ausgewählten Drop-Down Neu ist der Eingang deaktiviert werden muss, und aktiviert sein, der Eingang soll, wenn verwendet, aber wenn ich einen Wert der beobachtbaren eingeben Wird diesen Wert übernehmen und wenn ich den Dropdown-Wert auf neu ändere, muss das Observable zu Null werden.

Antwort

21

Ein manuelles Abonnement in Ihrem Ansichtsmodell ist ein guter Weg, um so etwas zu handhaben. Das Abonnement könnte wie folgt aussehen:

this.VehicleType.subscribe(function(newValue) { 
    if (newValue === "New") { 
     this.Mileage(0); 
    } 
}, this); 

Hier wird eine Probe es mit: http://jsfiddle.net/rniemeyer/h4cKC/

Die HTML:

<select name="VehicleType" id="vehicleTypeDropdown" data-bind="value: VehicleType"> 
    <option value="New" selected="selected">Nuevo</option> 
    <option value="Used">Usado</option> 
</select> 

<input type="text" name="Mileage" data-bind="disable: VehicleType() === 'New', value: Mileage" class="input-large"> 
<hr/> 

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre> 

Die JS:

var ViewModel = function() { 
    this.VehicleType = ko.observable(); 
    this.Mileage = ko.observable(); 

    this.VehicleType.subscribe(function(newValue) { 
     if (newValue === "New") { 
      this.Mileage(0); 
     } 
    }, this); 
}; 

ko.applyBindings(new ViewModel()); 
+0

danke, das funktioniert perfekt. – Overmachine

+2

@RP - Ein weiteres Juwel! Ich konnte dies für meinen eigenen Gebrauch anpassen, um das Textfeld bei einem Drop-Down-Wert auf einen Wert zu setzen. Vielen Dank! Natürlich muss die Dokumentation zu KnockOut JS fehlen, da ich '.subscribe()' bis jetzt noch nicht gesehen habe. – vapcguy

+0

brilliant danke – Andrew

1

Wenn Sie die ko mapping plugin verwenden, können Sie die Erstellung eines neuen Objekts abfangen und das Abonnement dort einrichten. Wenn Sie eine vollständige Liste mit Elementen haben und eine Aktion ausführen möchten, wenn sich etwas ändert.

Dies ist eine Ansicht Modell für eine Position Warenkorb (Eigenschaften wie qty, sku, description, price).

// View Model for an item in my shopping cart 
var CartItemViewModel = function(data) 
{ 
    // map all the properties 
    // we could map manually if we want, but that's the whole point of 
    // the mapping plugin that we don't need to 
    ko.mapping.fromJS(data, {}, this); 

    // subscribe to qty change 
    this.qty.subscribe(function (newValue) 
    { 
     alert('qty now ' + this.qty()); 
     // UpdateCart() 

    }, this);  

    // add computed observables if needed 
    // .... 
} 

Wenn Sie aktualisieren (oder erstellen) Ihr Modell der Mapping-Plugin Sie, dass für eine Eigenschaft angeben ‚Elemente‘ jedes Element im Array genannt sollte mit dem erstellt werden ‚Erstellen‘ Funktion, die Sie angeben.

var mapping = 
    { 
     'items': 
     { 
      // map cart item 
      create: function (options) 
      { 
       return new CartItemViewModel(options.data); 
      } 
     } 
    }; 

    var data = ...... // get your data from somewhere 

    // update the CartViewModel using the mapping rules 
    ko.mapping.fromJS(data, mapping, rrvm.CartViewModel); 
Verwandte Themen