2012-10-01 33 views
11

Eğer araç yeni veya kullanılmış ise seçeneklere sahip olan bu açılır menüye sahibim.Açılır değişimde gözlemlenebilir değeri değiştir Knockout Js

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

Ve bu girişi:

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

seçilen açılır menüde değer ben gözlemlenebilir bir değer girerseniz giriş devre dışı bırakılmalıdır ve kullanıldığı takdirde girdi etkin olmalıdır, ama New olursa Bu değeri alacağım ve eğer açılan değeri yeni olarak değiştirirseniz gözlemlenebilir sıfır olmalıdır.

cevap

21

Görünüm modelinizde manuel abonelik, böyle bir şeyle başa çıkmak için iyi bir yoldur. http://jsfiddle.net/rniemeyer/h4cKC/

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> 

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

teşekkürler, bu mükemmel çalışır. – Overmachine

+2

@RP - Başka bir mücevher! Bunu kendi kullanımım için, bir düşme değeri verilen bir değere metin alanını ayarlamak için kullanabildi. Teşekkürler! Şimdiye kadar .subscribe() 'yi görmediğim için açıkça KnockOut JS belgelerinin eksik olması gerekir. – vapcguy

+0

parlak teşekkürler – Andrew

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

örnek kullanıyor: gibi abonelik görünebilir ko mapping plugin kullanıyorsanız, yeni bir nesnenin oluşturulmasını engelleyebilir ve aboneliği buradan ayarlayabilirsiniz. Öğelerin bir listesi varsa ve bir şey değiştiğinde bir eylem gerçekleştirmek istiyorsanız.

Bu

bir alışveriş sepeti satır öğesi için bir görünüm modelidir (özellikler böyle qty, sku, description, price gibi). Eğer haritalama eklenti kullanarak modelinizi güncellemek (veya oluşturun) Ne zaman
// 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 
    // .... 
} 

sen 'ürün' Dizideki her öğe olarak adlandırılan bir özellik için belirtmek ile oluşturulması gerekir 'yaratmak' belirttiğiniz işliyor.
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); 
İlgili konular