2012-10-01 24 views
11

Tengo este menú desplegable que tiene opciones si el vehículo es nuevo o usado.Cambiar el valor observable en el cambio desplegable Knockout Js

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

Y esta entrada:

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

Si el valor en el menú desplegable seleccionada es nueva la entrada debe ser desactivado, y si se utiliza la entrada debe estar habilitado, pero si entro en un valor observable tomará este valor y si cambio el valor desplegable a nuevo, el observable debe convertirse en cero.

Respuesta

21

Una suscripción manual en su modelo de vista es una buena manera de manejar algo como esto. La suscripción puede ser como:

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

Este es un ejemplo de usarlo: http://jsfiddle.net/rniemeyer/h4cKC/

el 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> 

la 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

gracias, esto funciona perfectamente. – Overmachine

+2

@RP - ¡Otra joya! Pude adaptar esto para mi propio uso, usarlo para configurar el campo de texto a un valor, dado un valor desplegable. ¡Gracias! Claramente, la documentación de KnockOut JS debe faltar, ya que no había visto '.subscribe()' hasta ahora. – vapcguy

+0

gracias brillantes – Andrew

1

Si está utilizando el ko mapping plugin, puede interceptar la creación de un nuevo objeto y configurar la suscripción allí. Si tiene una lista completa de elementos y quiere realizar una acción cuando algo cambia.

Este es un modelo de vista de una línea de carrito de la compra (propiedades tales como 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 
    // .... 
} 

Al actualizar (o crear) su modelo usando el plugin de asignación especifica que para una propiedad llamada 'artículos' cada elemento de la matriz debe ser creado con el 'crear' función especifica.

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