在 Knockout JS 中更改下拉列表时网格值未更新答案

【问题标题】：Grid value not updating on changing dropdown in Knockout JS在 Knockout JS 中更改下拉列表时网格值未更新
【发布时间】：2015-03-01 22:48:23
【问题描述】：

请在评论部分找到更新的小提琴。

我已经提供了 HTML 代码和 ViewModel。在更改下拉值时，我希望更新网格中的点值。正在为新的下拉值计算点值，但返回无法将值绑定到网格。

【问题讨论】：

这是更新后的小提琴 jsfiddle.net/Kapil_B/vz3r0bs3

标签： javascript knockout.js

【解决方案1】：

为了在dropdownAValue 上更改 UI 中的seats，您需要先声明空的可观察数组：

self.seats = ko.observableArray();

并在订阅函数中更新它，而不是每次都创建新的observableArray：

self.seats([new PipCalculation(self.rates[0], self.rates[0].price, self.rates, self.newLot[0],currentlotvalue) ]);

见updated fiddle

【讨论】：

是的，它可以工作（是的，我们需要先声明）但是我们为什么要使用 self.seats([new xyz()]) 而不是 self.seats.push(new xyz()) 。第二种方法没有显示任何错误，但网格不会更新。
这些是不同的 Push 将值添加到数组中，而 self.seats([new xyz()]) 将旧值替换为新值。两者都应该工作，但您应该注意性能问题，请参阅这篇文章knockmeout.net/2012/04/knockoutjs-performance-gotcha.html
@supercool 您的代码按预期工作，它将值添加到 seats 数组的末尾。为了替换数组值，您有以下选项： 1. 清除数组并将项目推送到它self.seats([])、self.seats.push(。这不是最佳选择，因为每次推送值时都会强制 UI 更新，所以速度很慢。 2. 创建临时平面数组并用它更新seats。见Js fiddle
感谢 man +1 如此清晰。实际上删除了我的评论，即我通过清除然后推动它来工作&是的。
感谢 Max 成功了。我在返回值之前收到了警报，它反映了更新的值，但 HTML 没有更新。现在我明白缺少了什么。感谢你的帮助。非常感谢。

【解决方案2】：

好吧，我的回答将是 Max Brodin 给出的补充。

我们可以通过做这样的事情来进一步规范你的代码

查看模型：

    self.dropdownAValue = ko.observable(0.1);

    self.seats = ko.observableArray([]);

    var newItems = ko.utils.arrayMap(self.rates,function(item){
    return new PipCalculation(item, item.price, self.rates, self.newLot[0], self.dropdownAValue)
    });
    self.seats(newItems);

    //computed code
    self.formattedPrice2 = ko.computed(function() {
           //alert("hi");
            var cur = self.rate().pair;
            //var price = self.rate().price;
            //alert(self.myQuote());
            var price = self.myQuote();
            var pip = 1;
            var lot1 =currentlotvalue().lotSize;

工作小提琴here

要做的事情：

无需另外编写订阅下拉更改的订阅。您需要做的就是在您的情况下进一步发送正确的 DD 值实例。
当您在 DD subscribe 中填充 observablearray 时，性能会受到影响，即每次下拉更改。这可以通过像我上面提到的那样来避免。
宁可推入 Observable 数组推入普通数组，然后使用该数组（性能提高）- 在他的 cmets 中提到的最大值

还有另一种方法可以做到这一点（我以前这样做过）

self.seats([]); 
var mutatedArray = self.seats();
ko.utils.arrayForEach(self.rates,function(item){
mutatedArray.push(new PipCalculation(item, item.price, self.rates, self.newLot[0],self.dropdownAValue));  // push to the array(normal array)  
});  
 self.seats.valueHasMutated();

更多信息请参考我的回答here。

【讨论】：