如何获取嵌套视图模型的实例

Question

The view has a heading followed by section with has submenus. the design for the viewmodels is below:

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);  

                        });

        });

I need to call the AddSections method of the nested SettingsViewModel from MainViewModel instance. How to achieve this?

Thanks in advance.

Answer 1

Your problem is that parameter index from sections loop hides index from products loop. Just use another parameter name:

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);
        });
    });
};

Fiddle

Answer 2

I would use a EventAggregator to decouple viewmodels, I've written this lightweight EventAggregator

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

Subscribe:

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

Publish:

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