javascript - 如何获取嵌套视图模型的实例 - 淘汰赛

Question

该视图有一个标题，后跟带有子菜单的部分。视图模型的设计如下：

SettingsViewModel = function (pName) {
    var self = this;
    self.productName = ko.observable(pName), //heading
    self.sections = ko.observableArray([
            { checkboxID: ko.observable(), checkboxIDState: ko.observable(), sectionname: ko.observable(), sectionState: ko.observable() } 
        ]),  //submenus

    self.Addsections = function (checkboxid, sIdState, sName, sState) {
        this.sections.push({ checkboxID: checkboxid, checkboxIDState: sIdState, sectionname: sName, sectionState: sState });
    }
};


function MainViewModel() {
    var self = this;
    self.products = ko.observableArray([]);
    self.AddProducts= function (pname) {
        self.products.push(new SettingsViewModel(pname));
    }
};


$(document).ready(function () {
        VM = new MainViewModel();
        ko.applyBindings(VM, document.getElementById("divd"));
    data= []; //some dummy data
    CallMEnus(data);

 });

 function CallMEnus(data) {
        var str = "";

        $(data).each(function (index, products) {
            VM.AddProducts(products.name);

                        $(products.section).each(function (index, section) {

                            var ChkboxId = "data";  
                            var chkboxIdState = 'datt';
                            var chkboxIdState += " checked";
                        }
            //how to call the products add section method?
                            VM.products()[index].Addsections(ChkboxId, chkboxIdState, section.name, section.state);  

                        });

        });

我需要从 MainViewModel 实例调用嵌套 SettingsViewModel 的 AddSections 方法。如何做到这一点？

提前致谢。

Answer 1

您的问题是index部分循环中的参数隐藏index在产品循环中。只需使用另一个参数名称：

function CallMEnus(data) {
    var str = "";

    $(data).each(function (index, products) {
        VM.AddProducts(products.name);

        $(products.section).each(function(i, section) { // here
            var id = "data";
            var state = "checked";
            VM.products()[index].Addsections(id, state, section.name, section.state);
        });
    });
};

小提琴

Answer 2

我会使用 EventAggregator 来解耦视图模型，我已经编写了这个轻量级 EventAggregator

http://jsfiddle.net/wJtun/4/

订阅：

MyApp.eventAggregator.subscribe(MyApp.DeleteCustomerMessage, this.customerDeleted, this);

发布：

MyApp.eventAggregator.publish(new MyApp.DeleteCustomerMessage(this));