Question

大家好，我们正在寻找一些基本建议。

我有四种模式：BoardViewModel，List，Card，Member

var Member = function (id, name, avatar) {
    var self = this;

    self.id = id;
    self.name = name;
    self.avatar = avatar;
    self.isChecked = ko.observable(false);
};

我在BoardViewModel内实例化成员属性。但我想在每个Card模型中使用此模型的副本来实例化已分配成员的列表。

每张卡都以逗号分隔的成员参考列表存储，例如

",1,2,4,5"

我正在编写一个循环到BoardViewModel.members并将成员标记为已检查，如果id引用匹配，我将其指定为Card.members。

我遗漏的最后一块拼图是BoardViwModel.members。

我有一个可爱的例子fiddler，这有助于建立我所谈论的图片。

请记住，一旦我正常工作，我想替换view（）绑定

foreach: $root.members

与

foreach: members

如果可能，我希望避免将BoardViewModel.members作为参数传递到List，然后传递到Card。

更新1

正如@Jeroen所建议的，这是我fiddler的简化版。

包含列表概念的顶视图（）模型：

var BoardViewModel = function (lists, members) {
    var self = this;

    // in reality members are fetched via ajax call to the server
    // and instantiate as a ko.observableArray()
    self.groupMembers = ko.observableArray(members);
    self.lists = ko.observableArray(lists);
    ...
}

实际上它有这样的签名：

var boardViewModel = function (initialData)

继续前进。

包含卡片概念的儿童List模型：

var List = function (id, name, cards, sortOrder, groupMembers) {
    var self = this;

    self.cards = ko.observableArray(cards);
    ...
}

实际上：

var list = function (item, groupMembers)

真的没什么特别的。

包含卡片项目概念的子Card模型（但不允许去那里）：

var Card = function (id, title, description, contentItemId, members, groupMembers) {
    var self = this;

    self.members = ko.observableArray(parseMembers(members));

    // now remember each card has a members property
    // which stores comma separated list ",1,4"
    function (members) {
        var memberList = groupMembers;
        var memberRefList = members.split(',');
        ko.utils.arrayForEach(memberList, function(member){
            ko.utils.arrayForEach(memberRefList, function(memberId){
                if(member.id === meberId) {
                    member.isChecked(true);
                }
            });
        });
        return memberList;
    }
    ...
}

实际上：

var card = function (item, groupMembers)

也没有什么太花哨的。

我目前在我的开发环境中有类似的东西。

问题：
那些眼睛敏锐的人可能会注意到我一路向前groupMembers的方式。我并没有特别大肆宣传这个想法。

任何人都知道更好的实现方法吗？即为什么我不能做像

这样的事情

var memberList = self.parent.parent.groupMembers;

例如

。

Answer 1

按照我的说法，更好的方法是在父视图模型中使用子视图模型。像这样你可以直接访问父数据成员和方法。

<强>视图模型

var BoardViewModel = function(){
    var self = this;

    this.members = ko.observableArray();
    this.lists = ko.observableArray();

    // Child View Models
    this.Member = function(member){
        this.id = member.id;
        this.name = member.name;
        this.avatar = member.avatar;
        this.isChecked = ko.observable(false);
    }

    this.List = function(list){
        // same for this
    };

    this.Card = function(card){
        // same for this
    };

    // a Method to bind the data with the observables and arrays
    // Assuming data is a json object having Members, List objects
    this.applyData = function(data){
        self.members(jQuery.map(data.Members, function(item){
            return new self.Member(item);
        }));

        self.lists(jQuery.map(data.Lists, function(item){
            return new self.List(item);
        }));
    }
}

onDom ready

// json object holding your data
var data = {
    "Members" : [
    ],
    "Lists" : [
    ],
    "Cards" : [
    ]
};

var vm = new BoardViewModel();

$(function(){
    ko.applyBindings(vm, document.getElementById('myModule'));
    vm.applyData(data);
});

如何绑定/引用祖父母属性到/儿童淘汰赛内

更新1

1 个答案: