Question

我是Knockout JS的新手，我正在努力解决这个问题，需要你的指导。一切正常我有可能获得ProductID并ProductOffers VIA Ajax，但当我第二个dropdown没有填充自己。

<table>
    <thead>
        <tr>
            <th></th>
            <th>Product</th>
            <th>Product Offers</th>
            <th>Price</th>
            <th>Stock</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <select data-bind="options: Products, optionsText: 'Name',optionsValue: 'ID', value: ProductID, optionsCaption: '-'" />
            </td>
            <td data-bind="if: ProductID">
                <select data-bind="options: ProductOffers, optionsText: 'Name',optionsValue: 'ID', value: ProductOfferID, optionsCaption: '-'" />
            </td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">

    function Product(id, name) {
        this.ID = id;
        this.Name = name;
    }
    function Offer(id, name) {
        this.ID = id;
        this.Name = name;
    }

    var viewModel = {
        Products: ko.observableArray(<%= LoadProducts() %>),

        ProductID: ko.observable('0'),
        ProductOfferID: ko.observable('0'),

        ProductOffers: ko.observable("")
    };

        viewModel.ProductID.subscribe(function (newValue) {
            if (typeof newValue != "undefined") {
                //alert("Selected product is : " + newValue);
                viewModel.ProductOffers = GetProductOffers(newValue);
                //alert(viewModel.ProductOffers);
            }
        });

        ko.extenders.numeric = function (target, precision) {
            //create a writeable computed observable to intercept writes to our observable
            var result = ko.computed({
                read: target,  //always return the original observables value
                write: function (newValue) {
                    var current = target(),
                roundingMultiplier = Math.pow(10, precision),
                newValueAsNum = isNaN(newValue) ? 0 : parseFloat(+newValue),
                valueToWrite = Math.round(newValueAsNum * roundingMultiplier) / roundingMultiplier;

                    //only write if it changed
                    if (valueToWrite !== current) {
                        target(valueToWrite);
                    } else {
                        //if the rounded value is the same, but a different value was written, force a notification for the current field
                        if (newValue !== current) {
                            target.notifySubscribers(valueToWrite);
                        }
                    }
                }
            });

            //initialize with current value to make sure it is rounded appropriately
            result(target());

            //return the new computed observable
            return result;
        };

        ko.applyBindings(viewModel);

        function GetProductOffers(ProductID) {

            alert("Fetching offers for Product : " + ProductID)

            var Val = "";
            jQuery.ajax({
                type: "POST",
                url: "testing.aspx/GetProductOffers",
                data: "{ProductID: '" + ProductID + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false,
                success: function (msg) {
                    Val = msg.d;
                },
                error: function (jqXHR, exception) {
                    if (jqXHR.status === 0) {
                        alert('Not connect.\n Verify Network.' + jqXHR.responseText);
                    } else if (jqXHR.status == 404) {
                        alert('Requested page not found. [404]' + jqXHR.responseText);
                    } else if (jqXHR.status == 500) {
                        alert('Internal Server Error [500].' + jqXHR.responseText);
                    } else if (exception === 'parsererror') {
                        alert('Requested JSON parse failed.' + jqXHR.responseText);
                    } else if (exception === 'timeout') {
                        alert('Time out error.' + jqXHR.responseText);
                    } else if (exception === 'abort') {
                        alert('Ajax request aborted.' + jqXHR.responseText);
                    } else {
                        alert('Uncaught Error.\n' + jqXHR.responseText);
                    }
                }
            });
            return Val;
        }
</script>

**编辑：**这是在蒂姆的输入之后发生的事情。 my problem

JSFiddle：http://jsfiddle.net/neodescorpio/sPrVq/1/

编辑：

这是web方法，我已经更改它以生成一个有效的JSON根据JSLint。现在第二个下拉列表已经填满，但问题是每当我更改产品时，它的值永远不会改变，提取正确的值但是下拉列表没有显示它们。

    [WebMethod]
public static string GetProductOffers(long ProductID)
{
    StringBuilder sbScript = new StringBuilder();
    string json = "[{\"ID\": 0,\"Name\": \"Sorry ! No data found\"}]";
    bool first = true;

    List<DMS.ProductOfferDO> offers = ProductOffers.Get(ProductID);

    if (offers != null && offers.Count > 0)
    {
        sbScript.Append("[");
        foreach (var x in offers.OrderBy(d => d.IsCashOffer))
        {
            if (first)
            {
                sbScript.Append(string.Format("{{\"ID\": {0},\"Name\": \"{1}\"}}", x.ID, x.Name));
                first = false;
            }
            else
            {
                sbScript.Append(string.Format(",{{\"ID\": {0},\"Name\": \"{1}\"}}", x.ID, x.Name));
            }
        }
        sbScript.Append("]");
        json = sbScript.ToString();
    }
    return json;
}

Answer 1

<td data-bind="with: ProductID">不正确 - 只有拥有ProductID嵌套对象时才需要这样做。你没有这样，所以不需要它。只需将第二个列表绑定到ProductOffers而不是$data.ProductOffers。

如果你想要实现的目标是不显示第二个列表，直到有优惠，那么只需将<td data-bind="with: ProductID">更改为<td data-bind="if: ProductOffers">，这应该按预期工作。< / p>

修改
我不能肯定地说，因为我不确切知道返回的是什么，但我的猜测是ProductOffers存在问题。 ajax调用返回结果，这就是你设置ProductOffers的结果，但是每个ProductOffer的结构与你为选择列表绑定设置的结构相同吗？您有Name和ID作为绑定值，是您从ajax调用返回的项目的属性（GetProductOffers）？

编辑2
好的，我从你与Diana的聊天中看到你的网络方法返回的内容类似于＆＃34; [new Offer（..）...]＆＃34;。我的猜测是你将该方法编码为简单地返回字符串或其他东西，对吧？您需要实际创建一个List<Offer>，然后使用JavascriptSerializer或JSON.net等序列化它。您需要从Web方法返回JSON。如果你展示了网络方法代码会有所帮助，那么我们就可以帮你弄清楚出了什么问题。

编辑3
我肯定会建议不创建JSON＆＃34;用手＃34; - 使用内置的JavascriptSerializer或者更好的是使用JSON.net。虽然它不是必须的，但它更清洁，更简单。 PLus，为什么要重新发明轮子呢？检查Diana's answer - 她已经准确地概述了为了让它发挥作用你需要做些什么。祝好运！：）

Answer 2

为什么要将ProductOffers声明为ko.observable("")？它应该被声明为一个可观察的数组：ProductOffers: ko.observableArray([]);

另外，在你的JFiddle中：

function GetProductOffers(ProductID) {
    var Val = "[new Offer(1,'Name'),new Offer(2,'Product A'),new Offer(4,'Product B'),new Offer(5,'Product C')]";               
    return Val;
}

应该是：

function GetProductOffers(ProductID) {
    var Val = [new Offer(1,'Name'),new Offer(2,'Product A'),new Offer(4,'Product B'),new Offer(5,'Product C')];             
    return Val;
}

http://jsfiddle.net/sPrVq/2/

修改

尝试按如下方式修改您的设置：

[WebMethod] public static string GetProductOffers(long ProductID) { List<DMS.ProductOfferDO> offers = ProductOffers.Get(ProductID); return JsonConvert.SerializeObject(offers); }

首先需要导入：using Newtonsoft.Json;。

你为什么使用帖子？它应该是一个获得：

function GetProductOffers(ProductID) { $.get("testing.aspx/GetProductOffers", { ProductID: ko.toJSON(ProductID) } ) .done(function (data) { viewModel.ProductOffers(JSON.parse(data)); }) .fail(function (data) { }) .always(function () { }); }

<强> EDIT2：

viewModel.ProductID.subscribe(function (newValue) { viewModel.ProductOffers.removeAll(); if (newValue) { var productOffers = GetProductOffers(newValue); viewModel.ProductOffers(productOffers); } });

让我们知道这是怎么回事！

淘汰赛填充了下拉列表更改的字段

2 个答案: