更新 ObservableArray 下的项目未传播到 UI答案

【问题标题】：Update on Items under ObservableArray NOT propagated to UI更新 ObservableArray 下的项目未传播到 UI
【发布时间】：2014-05-10 00:35:25
【问题描述】：

在 ObservableArrayItem 中更新不更新 Ui 我有如下的淘汰模型

我的 c# 数据模型如下所示

   public class DTO
    {       
        public decimal Amount { get; set; }
        public decimal AmountLeft { get; set; }      
        public TypeDTO[] BType { get; set; }
    }

       public class TypeDTO
    {
        public string Description { get; set; }
        public decimal Amount { get; set; }
    }

这是我的 JS，对于初始加载它工作正常

var DetailsViewModel;

   $.ajax({
        url: "url",
        type: "get",
        contentType: "application/json",
        success: function (result) {

            for (i = 0; i < result.BType.length; i++) {
                addPercent(result.BType[i], result.Amount);
            }
            DetailsViewModel = ko.mapping.fromJS(result);
            ko.applyBindings(DetailsViewModel, $("#elem-box").get(0));


    });

function addPercent(BType, totalAmount)  //**adds two new fields to what server sends**
    {
        BType.Percent = ko.computed(function () {

            return ((BType.Amount / totalAmount) * 100).toFixed(2) + '%';
        });

        BType.Ratio = ko.computed(function () {

            return ((BType.Amount / totalAmount) ).toFixed(2);
        });

    }

在初始 UI 绑定上它可以完美运行。稍后当我在 javascript 中更新 DetailsViewModel.BType 中的数组时，它不会在 UI 中得到更新。

触发某些事件传递 UI 元素的索引对应于 BType 数组

var totalAmount = DetailsViewModel.Amount();

DetailsViewModel.BType()[index].Amount = totalAmount * 10;
DetailsViewModel.AmountLeft = totalAmount - DetailsViewModel.BType()[index].Amount;

addPercent(DetailsViewModel.BType()[index], totalAmount);

对 BType 数组的更新都没有在 UI 端更新，也没有在 addPercent 函数下进行更新，在 console.log 上我可以看到模型端执行的所有更新都运行成功。为什么 arrayItem 更新不会传播到 UI？

【问题讨论】：

标签： c# javascript jquery mvvm knockout.js

【解决方案1】：

您无法更新单个索引。您需要将整个数组传递给 observable，以便敲除可以运行内部更新代码。

var bt = DetailsViewModel.BType();
bt[index].Amount = totalAmount * 10;
DetailsViewModel.BType(bt);

【讨论】：

但是如何更新函数 addPercent 下的计算值？

【解决方案2】：

除了@Robert Krzyzanowski 所说的，您需要遵循以下模式：

var typeDTOs = ko.observableArray([]);
var underlyingArray = [];

_.each(result.BType, function(typeDTO) {
    typeDTO = addPercent(typeDTO, result.Amount);
    underlyingArray.push(typeDTO);
}

typeDTOs(underlyingArray);

或类似的东西（为了清楚起见，我在上面使用了 underscore.js）。你要确保不要推入你的 observable 数组；而是推入底层数组。然后，您可以一次更新所有可观察数组。如果你不这样做，你最终会为你推入可观察数组的每个项目触发更改事件——通常是不可取的。

关于 Observable 数组的另一个注意事项

只是一个侧边栏...如果您的数组元素是对象字面量，并且您希望您的 UI 响应字面量属性的更改，则您必须使每个 UI 绑定属性也成为可观察的。

【讨论】：