Knockout.js 使用knockout.viewmodel时如何更新数组成员？

viewmodel插件包含一个“arrayChildId”选项，用于“识别[阵列成员]以进行更新”。但是，无论是

pushFromModel

函数还是

updateFromModel

实用程序函数似乎都不是这样工作的

我制作了一个示例（如下所示），展示了这些函数实际上是如何工作的——前者用更新的元素替换整个数组，而前者在数组末尾推送更新元素的新副本，忽略

ArrayChildId

属性

在

knockout.viewmodel

view模型中更新数组成员的正确方法是什么？如果我只是自己定位数组成员并手动更新它，为什么会有

ArrayChildId

选项

var模型={
船员：[{
克雷维德：1，
CrewName：“测试1”
}, {
克雷维德：2，
CrewName：“测试2”
}]
};
var viewModel=ko.viewModel.fromModel（model{
arrayChildId：{
{root}.Crews:“CrewId”
}
});
viewModel.updateRecord=函数（）{
ko.viewmodel.updateFromModel（viewmodel{
船员：[{
克雷维德：1，
CrewName：“测试更新1”
}]
})
};
viewModel.updateRecord2=函数（）{
viewModel.Crews.pushFromModel({
克雷维德：1，
CrewName：“测试更新1”
})
};
应用绑定（视图模型）

身份证件
名称
使用updateFromModel更新记录
使用pushFromModel更新记录
updateFromModel
假设您收到了更新的模型（即包含所有内容，而不仅仅是增量），并基于此对viewmodel进行增量更改。换句话说，“替换整个阵列”是测试用例的预期效果。（实际上，ID为1的对象在您的情况下接收更新，它看起来只是一个替换。）

在下面的比较中，我突出显示了视图的增量更改，以证明它确实有效

pushFromModel
的设计不考虑
arrayChildId
。它应用映射选项（extend、apend等）并将生成的对象推送到目标阵列上


var模型={
船员：[
{CrewId:1，CrewName:“test 1”}，
{CrewId:2，CrewName:“test 2”}
]
};
var vm=ko.viewmodel.fromModel（model{
arrayChildId：{
{root}.Crews:“CrewId”
}
});
vm.updateFromModel=函数（）{
ko.viewmodel.updateFromModel（vm{
船员：[
{CrewId:1，CrewName:“test 1”}，
{CrewId:2，CrewName:“test2 new”}，
{CrewId:3，CrewName:“test 3”}
]
});
};
vm.pushFromModel=函数（）{
vm.Crews.pushFromModel({
克雷维德：1，
CrewName：“测试更新1”
});
};
vm.yellowFadeIn=函数（元素、索引、数据）{
var$row=$（元素）.filter（“tr”）；
$row.css（{backgroundColor:'yellow'}）；
setTimeout（函数（）{
$row.css（{backgroundColor:'}）；
}, 500);
};
ko.bindingHandlers.text.realupdate=ko.bindingHandlers.text.update；
ko.bindingHandlers.text.update=函数（元素）{
变量$elem=$（元素）；
ko.bindingHandlers.text.realupdate.apply（这是参数）；
$elem.css（{color:'red'}）；
setTimeout（函数（）{
$elem.css（{color:'}）；
}, 500);
};
ko.应用绑定（vm）

updateFromModel
pushfrom模型
身份证件
名称
updateFromModel
假设您收到了更新的模型（即，包含所有内容，而不仅仅是增量），并基于此对viewmodel进行增量更改。换句话说，“替换整个阵列”是测试用例的预期效果。（实际上，ID为1的对象在您的情况下接收更新，它看起来只是一个替换。）

在下面的比较中，我突出显示了视图的增量更改，以证明它确实有效

pushFromModel
的设计不考虑
arrayChildId
。它应用映射选项（extend、apend等）并将生成的对象推送到目标阵列上


var模型={
船员：[
{CrewId:1，CrewName:“test 1”}，
{CrewId:2，CrewName:“test 2”}
]
};
var vm=ko.viewmodel.fromModel（model{
arrayChildId：{
{root}.Crews:“CrewId”
}
});
vm.updateFromModel=函数（）{
ko.viewmodel.updateFromModel（vm{
船员：[
{CrewId:1，CrewName:“test 1”}，
{CrewId:2，CrewName:“test2 new”}，
{CrewId:3，CrewName:“test 3”}
]
});
};
vm.pushFromModel=函数（）{
vm.Crews.pushFromModel({
克雷维德：1，
CrewName：“测试更新1”
});
};
vm.yellowFadeIn=函数（元素、索引、数据）{
var$row=$（元素）.filter（“tr”）；
$row.css（{backgroundColor:'yellow'}）；
setTimeout（函数（）{
$row.css（{backgroundColor:'}）；
}, 500);
};
ko.bindingHandlers.text.realupdate=ko.bindingHandlers.text.update；
ko.bindingHandlers.text.update=函数（元素）{
变量$elem=$（元素）；
ko.bindingHandlers.text.realupdate.apply（这是参数）；
$elem.css（{color:'red'}）；
setTimeout（函数（）{
$elem.css（{color:'}）；
}, 500);
};
ko.应用绑定（vm）

updateFromModel
pushfrom模型
身份证件
名称
谢谢您的解释。那么，ArrayChildId属性似乎根本没有在内部使用；整个阵列都被替换了吗？不，事实并非如此。我想你真的应该试试我给你的样品。密切关注正在进行的各种突出显示。好啊实际上，不是真正有用的功能，那么。。。在最常见的用例中，如果我对服务器执行一些CRUD，它将只返回{added，updated}记录，而不是整个数据集。@GrahamCharles HTTP是一个无状态协议，也就是说，如果您发送“GET xyx”，您希望得到一个完整的xyz实例作为响应。这是th模拟的行为