Question

What I am trying to achieve is for the LoadVenues() function to populate a nested foreach template:

I have an array of Providers which has a Provider.ProviderVenues collection – I don’t want ProviderVenues populated for every Provider. I want the user to able to click a Provider and then have the ProviderVenues collection for the clicked provider populated ‘on demand’.

I have a knockout foreach template of ‘providers’, as loaded from a web service.

<tbody data-bind="foreach: {data: providers}">

The template lists each Provider and each includes a link which when clicked expands a Bootstrap Accordion and calls a ViewModel function LoadVenues()

<td>
    <a href="#"  data-toggle="collapse" data-bind="attr: { 'data-target': DomId }, click: $parent.LoadVenues">Click to expand and see Venues</a>

    <div data-bind="attr: { 'id': Id }" class="collapse" >
        Venues list:                                            
        <ul data-bind="foreach: {data: ProviderVenues}">
            <li data-bind="text: Name"></li>
        </ul>

    </div>
</td>

and in the ProvidersViewModel…

function providersViewModel() {
    var obj = {};

    obj.providers = ko.observableArray();

    function loadProvidersFromSvc() {
        var url = '/api/providersvc/GetAllProviders';   
        $.getJSON(url,
            function (data) {            
                obj.providers.removeAll();
                var results = ko.observableArray();
                ko.mapping.fromJS(data.Records, {}, results);
                for (var i = 0; i < results().length; i++) {
                    obj.providers.push(results()[i]);
                };
            }
        );
    };

    function loadVenues(record) {
      alert('clicked ' + record.Id());
      //todo: call $.getJSON, get Venues by Provider Id and somehow get this data into the nested template.
    }

    obj.LoadVenues = loadVenues;
}

What I really want loadVenues() to do is pull Venue data from the webservice by Provider Id (which I can do) and bind the retrieved ProviderVenues data to the nested template that was clicked.

I’m totally baffled as to how to do this and think I might be going the wrong way. Can somebody please point me in the right direction?

Answer 1

Move the LoadVenues function to the ProviderViewModel since it belongs there, and just load the observableArray from there. If you really, really need todo from the parent the click handler takes the clicked viewmodel as argument so you can load the array using the reference

Example on the parent approach

http://jsfiddle.net/kMvGp/1/