更改下拉更改 Knockout Js 上的可观察值答案

【问题标题】：Change observable value on dropdown change Knockout Js更改下拉更改 Knockout Js 上的可观察值
【发布时间】：2012-09-22 13:08:26
【问题描述】：

我有这个下拉菜单，其中有车辆是新的还是二手的选项。

<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"> `

如果选择的下拉列表中的值是 New，则必须禁用输入，如果使用，则应启用输入，但如果我输入一个值，observable 将获取该值，如果我将下拉值更改为新的 observable必须为零。

【问题讨论】：

标签： data-binding knockout.js observable

【解决方案1】：

在视图模型中手动订阅是处理此类问题的好方法。订阅可能如下所示：

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

这是一个使用它的示例：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());

【讨论】：

@RP - 另一个宝石！能够调整它以供我自己使用，使用它来将文本字段设置为一个值，给定一个下拉值。谢谢！显然，KnockOut JS 文档肯定是缺少的，因为直到现在我还没有看到 .subscribe()。

【解决方案2】：

如果您使用ko mapping plugin，您可以拦截新对象的创建并在那里设置订阅。如果您有一个完整的项目列表，并且您想在某些事情发生变化时执行一项操作。

这是购物车订单项的视图模型（属性，例如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
    // ....
}

当您使用映射插件更新（或创建）模型时，您指定对于名为“items”的属性，数组中的每个元素都应使用您指定的“create”函数创建。

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

【讨论】：