Question

我正在尝试使用Ajax调用更新KnockOutJS页面。 Update函数应从Web服务检索Gifts Observable数组。不应该更新模型，然后是UI。我一定不知道这是如何运作的。我的想法？

由于

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <tit
le>Index</title>
    <link rel="Stylesheet" href="/Content/Site.css" />
    <script type="text/javascript" src="/Scripts/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.validate.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.tmpl.js"></script>

    <script type="text/javascript" src="/Scripts/knockout-1.2.1.js"></script>
    <script type="text/javascript" src="/Scripts/knockout.mapping.js"></script>
    <script type="text/javascript" src="/Scripts/json2.js"></script>
    <script type="text/javascript" src="http://knockoutjs.com/examples/resources/sampleProductCategories.js">
</script>
</head>
<body>
    <div>
    <h1>Gift list editor 2</h1>
    11/15/2011 12:55:32 PM <br />

    <p>You have asked for <span data-bind="text: gifts().length">&nbsp;</span> gift(s)</p>

    <form class="giftListEditor" action="" >
        <table style="width: 800px;"> 
            <tbody data-bind="template: { name: 'giftRowTemplate', foreach: gifts }"></tbody> 
        </table>


        <button data-bind="click: addGift">Add Gift</button>
        <button data-bind="enable: gifts().length > 0" type="submit">Submit</button>
        <button data-bind="click: update, enable: gifts().length > 0">Partial Update</button>

    </form>

    <script type="text/html" id="giftRowTemplate"> 
        <tr> 
            <td style="width:100px;" >
                <label data-bind="visible: GiftId == 0">New</label>
                <label data-bind="text: 'GiftId: ' + GiftId, visible: GiftId > 0" />
            </td> 
            <td><select data-bind='options: sampleProductCategories, optionsText: "name"' /></td>
            <td>Gift name: <input class="required" data-bind="value: Title, uniqueName: true"/></td> 
            <td>Price: $ <input class="required number" data-bind="value: Price, uniqueName: true" /></td> 
            <td><a href="#" data-bind="click: function() { viewModel.removeGift($data) }">Delete</a></td> 
        </tr>
    </script>

    <script type="text/javascript">

        var initialData =  [{"GiftId":13,"Title":"test","Price":3},{"GiftId":15,"Title":"asdasd","Price":444},{"GiftId":44,"Title":"asd","Price":1},{"GiftId":45,"Title":"asdasd","Price":1231},{"GiftId":46,"Title":"qwe","Price":132},{"GiftId":47,"Title":"eeee","Price":123123},{"GiftId":48,"Title":"www","Price":121212}];    //var initialData = [{ GiftId: "","Title": "Tall Hat", "Price": 49.95 }, { GiftId: "","Title": "Long Cloak", "Price": 78.25}];

        var viewModel = {

            gifts: ko.observableArray(initialData),

            addGift: function () { 
                this.gifts.push({ GiftId: "0", Title: "", Price: "" }); 
            },

            removeGift: function (gift) { 
                this.gifts.remove(gift); 
            },

            update: function () { 
                 $.ajax({
                    url: "/Home/PartialUpdate", 

                    success: function(result){
                        this.gifts =  ko.utils.parseJson(result); //[{ GiftId: "33", Title: "ThirtyThree", Price: "10.50" }] 
                        alert(this.gifts.length);
                    },
                    error:function(xhr,err){ 
                        alert("readyState: " + xhr.readyState+"\nstatus: "+xhr.status); 
                        alert("responseText: " + xhr.responseText);
                    }
                 });
            },

            save: function() { 
                ko.utils.postJson(location.href, { gifts: this.gifts }); 
            } 
        };

        ko.applyBindings(viewModel, document.body);

        $("form").validate({ submitHandler: function() { viewModel.save() } });

    </script>


    </div>
</body>
</html>

Answer 1

this.gifts是一个observableArray。设置更新值时，需要将其设置为observable：

this.gifts(ko.utils.parseJson(result));

您拥有的当前代码是将礼物设置为等于不可观察或当前绑定到UI的新数组。

您可能还需要在成功功能中小心this。如果this不合适，那么您可以选择在$ .ajax选项中添加context: viewModel。

KnockOutJs对象未更新UI

1 个答案: