【问题标题】:Change options value programmatically using Knockout使用 Knockout 以编程方式更改选项值
【发布时间】:2013-11-11 16:59:14
【问题描述】:

我有一个带有敲除的选项绑定,如下所示:

<select id="ddlProducts" data-bind="options: ShowProducts, optionsText: 'pruductskuname', optionsCaption: 'Choose a product...', value: currentproduct"></select>

我有一个验证序列号并返回产品名称的 ajax 调用。我想将 Selected Option 更改为退货产品。我的 ajax 调用返回的是产品名称:pruductskuname

有没有办法根据我的回报设置选择的选项?

例如,如果 return if my Return == ProductA 我想在我的 Options ProductA 中找到并将值设置为 ProductA。

这是我的虚拟机:

    /* Data View Model */
    var myDataViewModel = {
        products: ko.observableArray(),
        viewserialized: ko.observable(1),
        currentordernumer: ko.observable(),
        currentserialqty: ko.observable(),
        currentproduct: ko.observable(),
        dataitems: ko.observableArray()
    };

这是我获取返回消息的 ajax 调用:

 $.ajax({
                url: "ServiceURL",
                data: { Serial: ko.toJS(myDataViewModel.currentserialqty) },
                type: "GET",
                contentType: "application/json; charset=utf-8",
                dataType: "JSON",
                timeout: 10000,
                success: function (Result) {
                   /*SET OPTION BINDING HERE BASED ON Result.d */
                    alert(Result.d);
                },
                error: function (xhr, status) {
                    alert(status + " - " + xhr.responseText);
                }
            });

【问题讨论】:

    标签: javascript jquery ajax knockout.js


    【解决方案1】:

    有两种方法可以做到这一点,一种是将 optionsValue 设置为 pruductskuname ,如下所示:

     <select id="ddlProducts" data-bind="options: ShowProducts, optionsText: 'pruductskuname', optionsCaption: 'Choose a product...', value: currentproduct", optionsValue: 'pruductskuname'></select>
    

    这将使 currentproduct 等于产品的名称,因此您在成功回调中所要做的就是 myDataViewModel.currentproduct(Result.d);

    如果你不这样做,你可以

      myDataViewModel.currentproduct(ko.utils.arrayFirst(myDataViewModel.products(), function (item)
        {
            return item.pruductskuname() === Result.d;  //note the ()
        })
    

    它将搜索具有该名称的项目并将其设置为当前产品。

    【讨论】:

    • 代码中有一个错误:return item.pruductskuname() === Result.d; 应该改成return item.pruductskuname === Result.d; 才可以。感谢一百万
    • 哦,好吧,我假设你的数组中的对象具有可观察的属性,你是如何填充你的数组的?
    • 它确实有可观察的属性,我是这样填充的:这是我的 ajax 成功方法success: function (Result) { for (var i = 0; i &lt; Result.d.length; i++) { element = Result.d[i]; myDataViewModel.products.push({ productskuid: element.ProductSKUID, pruductskuname: element.ProductSKUName, productskurequiresvalidation: element.ProductSKURequiresValidation }); } },
    • 它们实际上不是数组中的可观察属性。将 productskuid: element.ProductSKUID, pruductskuname: element.ProductSKUName, productskurequiresvalidation: element.ProductSKURequiresValidation 更改为 productskuid: ko.observable(element.ProductSKUID), pruductskuname: ko.observable(element.ProductSKUName), productskurequiresvalidation: ko.observable(element.ProductSKURequiresValidation ) 并且它们现在可以被观察到了。
    • 您正在做的是将一个简单的 javascript 对象推送到可观察数组中。这意味着每次将新项目推入数组或删除某些内容或移动某些内容时,它都会向所有订阅者发布已进行更改的所有订阅者,但是一旦名称已更改或id,或者需要验证。
    猜你喜欢
    • 2015-06-01
    • 2017-03-24
    • 2011-10-31
    • 1970-01-01
    • 2021-12-08
    • 1970-01-01
    • 2021-08-13
    • 1970-01-01
    • 2011-06-12
    相关资源
    最近更新 更多