Knockout.js 可观察数组,其中数组中的每个项都包含一个数组-如何使内部数组可观察
问题:我从服务器返回了Json。Json是一个企业阵列,每个企业都可以有多个联系人。我想让联系人成为一个可观察的数组,这样绑定到联系人的html元素在删除时得到更新,而数组在编辑时得到更新 我已经设置了以下JSFIDLE- 这是我的JSFIDLE视图模型Knockout.js 可观察数组,其中数组中的每个项都包含一个数组-如何使内部数组可观察,knockout.js,Knockout.js,问题:我从服务器返回了Json。Json是一个企业阵列,每个企业都可以有多个联系人。我想让联系人成为一个可观察的数组,这样绑定到联系人的html元素在删除时得到更新,而数组在编辑时得到更新 我已经设置了以下JSFIDLE- 这是我的JSFIDLE视图模型 var businessViewModel = { allBusinesses: ko.observableArray([ { name: "Biz
var businessViewModel =
{
allBusinesses: ko.observableArray([
{ name: "Biz1", id: 1, Contacts: [{ name: "Joe", email: "test@test", phone: "555-111-1111" }, { name: "Smith", email: "smith@test", phone: "777-111-2223"}] },
{ name: "Biz2", id: 2, Contacts: [{ name: "Joe", email: "test@test", phone: "555-222-1111" }, { name: "Smith", email: "smith@test", phone: "555-111-2222"}] }
]),
businessId: ko.observable(1)
};
businessViewModel.selectedBusiness = ko.dependentObservable(function () {
var biz = this.allBusinesses()[0];
for (var i = 0; i < this.allBusinesses().length; i++) {
if (this.allBusinesses()[i].id == this.businessId()) {
biz = this.allBusinesses()[i];
break;
}
}
return biz;
}, businessViewModel);
businessViewModel.removeContact = function (contact) {
ko.utils.arrayRemoveItem(this.selectedBusiness().Contacts, contact);
ko.applyBindings(businessViewModel, $("#sectionBusinesses")[0]);
} .bind(businessViewModel);
var业务视图模型=
{
所有业务:ko.Array([
{姓名:“Biz1”,id:1,联系人:[{姓名:“Joe”,电子邮件:test@test,电话:“555-111-1111”},{姓名:“史密斯”,电子邮件:smith@test,电话:“777-111-2223”}]},
{姓名:“Biz2”,id:2,联系人:[{姓名:“Joe”,电子邮件:test@test,电话:“555-222-1111”},{姓名:“史密斯”,电子邮件:smith@test,电话:“555-111-2222”}]}
]),
businessId:ko.可观察(1)
};
businessViewModel.selectedBusiness=ko.DependentToServable(函数(){
var biz=this.allbusinesss()[0];
for(var i=0;i
做我需要的事情最干净/推荐的方法是什么
谢谢,首先,我不知道你为什么每次删除联系人时都给ko.applyBindings打电话。您通常只需要调用applyBindings一次,而这通常会导致问题 我建议使用ko.mapping插件,这将使整个过程相当轻松 我还更新了您的removeContact以使用更新的ViewModel,并稍微更改了您选择的业务 这是小提琴: 以及守则:
var jsonData = {
allBusinesses: [{
name: "Biz1",
id: 1,
Contacts: [{
name: "Joe",
email: "test@test",
phone: "555-111-1111"},
{
name: "Smith",
email: "smith@test",
phone: "777-111-2223"}]},
{
name: "Biz2",
id: 2,
Contacts: [{
name: "Joe",
email: "test@test",
phone: "555-222-1111"},
{
name: "Smith",
email: "smith@test",
phone: "555-111-2222"}]}]
};
var businessViewModel = {
allBusinesses: ko.observableArray(),
businessId: ko.observable(1)
};
businessViewModel.selectedBusiness = ko.dependentObservable(function() {
var biz = this.allBusinesses()[0];
biz = ko.utils.arrayFirst(this.allBusinesses(), function(item) {
return (item.id() === parseInt(this.businessId()));
}, this);
return biz;
}, businessViewModel);
businessViewModel.removeContact = function(contact) {
this.selectedBusiness().Contacts.remove(contact);
}.bind(businessViewModel);
ko.mapping.fromJS(jsonData, {}, businessViewModel);
ko.applyBindings(businessViewModel);
查看这篇博文的开头:这有助于解释映射api:-。ThanksHi@MHollis-感谢您的帮助和更新的JSFIDLE。我第二次调用applyBindings的原因是为了再次尝试使knockout应用绑定以查看联系人是否已删除,我意识到这不是推荐的方法,但需要进行故障排除。我将对映射做一些研究,它们对我来说还不清楚。谢谢