Access to the component view model from its containing viewmodel

Question

I am facing knockout.js and require.js components. So far this works well, but I am struggling with the following.

Let's say I have one instance of my component in a very simple html page:

<div id="exams">
    <databound-exam-control></databound-exam-control>
</div>

From a supporting viewmodel:

require(['knockout', 'viewModel', 'domReady!'], function (ko, viewModel) {
    ko.components.register('databound-exam-control', {
        viewModel: { require: 'databound-exam-control-viewmodel' },
        template: { require: 'text!databound-exam-control-view.html' }
    });

    ko.applyBindings(new viewModel());
});

I would like to get the contents of the viewmodel for posterity to save all the page data when I click the button.

Now I'm just trying to display the display of the parent / child models in the pre tag :

<div>
    <pre data-bind="text: childViewModel()"></pre>
</div>

Using the containing viewmodel:

function childViewModel() {
        var model = ko.dataFor($('databound-exam-control').get(0).firstChild);
        return ko.toJSON(model, null, 2);
};

I get the following error while calling ko.dataFor, possibly because the page is not fully displayed:

ko.computed, "write". , .

? ?

.

Answer 1

.

• , childViewModel = ko.observable()
• <databound-exam-control params= "{modelForParent: childViewModel}"> , modelForParent, childViewModel
• viewmodel , databound-exam-control-viewmodel.js script, . , : function SomeComponentViewModel(params) params.modelForParent
• - , , , : params.modelForParent(createdChildViewModel).

, childViewModel.

- . . , viewmodel, , . :

• api , : registerApi = function(api) { config.childApi = api }
• , api

, api, : config.childApi.aMethosExposedByTheChild()

: , , , , , .

, . , , , , , .

, - , ( : $.) , , , . , child AJAX (, , ).

, , , , . , , , .