javascript – ko.Computed()不使用observableArray更新

我有如下代码：

// First we define our gift class,which has 2 properties:
// a Title and a Price.
// We use knockout js validation to ensure that the values input are suitable/ 
function Gift(item)
{
    var self = this;
    self.Title = ko.observable(item.Title);

    // attach some validation to the Title property courtesy of knockout js validation
    self.Title.extend({
        required: true,minLength: 3,pattern: {
            message: 'At least ',params: '^[a-zA-Z]+\s?[a-zA-Z]*'
        }
    });
    self.Price = ko.observable(item.Price);
    self.Price.extend({required:true,number:true,min:0.1,max:1000});
};


var viewmodelForTemplated =
{
    gifts: ko.observableArray(),// gifts will be an array of Gift classes

    addGift: function ()
    {
        this.gifts.push(new Gift({ Title: "",Price: "" }));
    },removeGift: function (gift)
    {
        this.gifts.remove(gift);
    },totalCost: ko.computed(function () {
        if (typeof gifts == 'undefined')
            return 0;

        var total = 0;

        for (var i = 0; i < gifts().length; i++)
        {
            total += parseFloat(gifts()[i].Price());
        };
        return total;
    })
}


$(document).ready(function ()
{
    // load in the data from our MVC controller 
    $.getJSON("gift/getdata",function (allgifts)
    {
        var mappedgifts = $.map(allgifts,function (gift)
        {
            return new Gift(gift);
        });

        viewmodelForTemplated.gifts(mappedgifts);
    });

    ko.applyBindings(viewmodelForTemplated,$('#templated')[0]);
}

然后(脚本上面)

<div id="templated">

<table >
    <tbody data-bind="template: { name: 'giftRowTemplate',foreach: gifts }"></tbody>
</table>

<script type="text/html" id="giftRowTemplate">
    <tr>
        <td>Gift name: <input data-bind="value: Title"/></td>
        <td>Price: \$<input data-bind="value: Price"/></td>           
        <td><a href="#" data-bind="click: function() { viewmodelForTemplated.removeGift($data) }">Delete</a></td>
    </tr>
</script>

<p>Total Cost <span data-bind="text: totalCost"></span> </p>    

<button data-bind="click: addGift">Add Gift</button> 

<button data-bind="click: save">Save</button>

</div>

totalCost方法只运行一次,当礼物数组为空时,我可以将项目推送或删除到observableArray()中,但没有任何问题.

如何获取参考totalCost更新的跨度？我打赌这是一个简单的事情:)

谢谢你的帮助.

解决方法

你需要展开你的观察：

totalCost: ko.computed(function () {
    //also,you forgot typeof below
    if (typeof gifts == 'undefined')
       return 0;

    var total = 0;  //here \/
    for (var i=0; i < gifts().length; i++)
    {                //and here  \/
        total += parseFloat(gifts()[i].Price());
    };
    return total;
})

它不是更新的原因是因为

gifts.length

总是评估为0,永远不会进入循环.即使如此,

gifts[i].Price()

不会因为同样的原因而工作你需要展开可观察的.

请注意,当您不解开时,长度评估为零的原因是因为您获得了length of the actual observable array function. Knockout中的所有可观察值都被实现为常规函数;当你不打开它,你正在击中实际的功能本身,而不是底层的数组.

编辑,

此外,您需要使用此赠品参考礼品,因为它是一个对象属性.这就是为什么这不工作;礼物一直没有定义.

也就是说,你还需要做一些更多的工作来让ko计算机从一个对象字面上工作.在这里阅读更多信息：

http://dpruna.blogspot.com/2013/09/how-to-use-kocomputed-in-javascript.html

以下是我将如何使您的视图模型：

function Vm{
    this.gifts = ko.observableArray();        // gifts will be an array of Gift classes

    this.addGift = function () {
        this.gifts.push(new Gift({ Title: "",Price: "" }));
    };

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

    this.totalCost = ko.computed(function () {
        var total = 0;

        for (var i = 0; i < this.gifts().length; i++)
        {
            total += parseFloat(this.gifts()[i].Price());
        };
        return total;
    },this);
}

var viewmodelForTemplated = new Vm();

原文地址：https://www.jb51.cc/js/152850.html