Thay đổi giá trị quan sát được trên thay đổi thả xuống Knockout Js

Question

Tôi có danh sách thả xuống này có các tùy chọn nếu xe mới hoặc cũ.

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

Và đầu vào này:

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

Nếu giá trị trong danh sách thả xuống chọn là mới đầu vào phải được vô hiệu hóa, và nếu được sử dụng đầu vào nên được kích hoạt, nhưng nếu tôi nhập một giá trị quan sát được sẽ lấy giá trị này và nếu tôi thay đổi giá trị thả xuống thành giá trị mới có thể quan sát phải bằng 0.

Answer 1

Đăng ký thủ công trong mô hình chế độ xem của bạn là một cách hay để xử lý nội dung như thế này. Các thuê bao có thể trông giống như:

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

Dưới đây là một mẫu sử dụng nó: 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> 

Các 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()); 

Answer 2

Nếu bạn đang sử dụng ko mapping plugin, bạn có thể chặn việc tạo đối tượng mới và thiết lập đăng ký ở đó. Nếu bạn có toàn bộ danh sách các mục và bạn muốn thực hiện một hành động khi có điều gì đó thay đổi.

Đây là mô hình chế độ xem cho chi tiết đơn hàng giỏ hàng (các thuộc tính như 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 
    // .... 
} 

Khi bạn cập nhật (hoặc tạo) mô hình của bạn bằng cách sử dụng plugin của bản đồ bạn chỉ định rằng đối với một tài sản gọi là 'mục' mỗi phần tử trong mảng nên được tạo ra với 'tạo' chức năng bạn chỉ định.

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