敲除选择数据绑定

Question

您好，我有一个对象数组，其中包含一些值，我想将其放入数据绑定中，但随后在事件更改时传递所选选项的 id。

到目前为止我有：

昏死：

 <select data-bind="options: Model.Products,
                           optionsText: 'Name',
                           event: { change: function(){Model.TestFunction(Model.Products.Id);} }"  
                               ></select>

我的对象的结构示例：

Model.Products():
    0: Object
      Cost: 0
      Id: "2e481911-cff3-e411-80cf-000d3ab07471"
      Name: "Product 1"
    __proto__: Object

javascript

TestFunction: function (o){

        var test = o;
    }

Answer 1

最好将可观察值绑定到选择元素的值。

首先向您的视图模型添加一个可观察对象（我假设Model是您的视图模型，我将遵循您的帕斯卡案例）：

Model.SelectedProduct = ko.observable();

然后将 observable 绑定到 select 元素：

<select data-bind="options: Model.Products, optionsText: 'Name', value: Model.SelectedProduct"></select>

你可以订阅 observable，当 observable 的值改变时，它将执行你的函数：

Model.SelectedProduct.subscribe(function(product) {
    Model.TestFunction(product.Id);
});

这样做更好的原因是，在MVVM中，您希望在视图模型中保留尽可能多的逻辑，以便视图只专注于表示。这是关注点分离。

例如，当更改所选产品时，如果您想确保Model.TestFunction将执行该操作，那么无论视图中发生什么情况，这样做都可以确保这一点。如果将此逻辑移至视图，则您将面临潜在的错误，并增加了支持所选产品更改时的所有情况所需的复杂性和工作量。此外，您需要记住添加此附加逻辑，当您忘记这样做时，这会产生错误。