如何从父模板中的函数填充 foreach 模板？

Question

我想要实现的是 LoadVenues() 函数填充嵌套的 foreach 模板：

我有一个 Providers 数组，其中有一个 Provider.ProviderVenues 集合 - 我不希望为每个 Provider 填充 ProviderVenues。我希望用户能够单击提供者，然后将单击的提供者的 ProviderVenues 集合“按需”填充。

我有一个“提供者”的淘汰赛 foreach 模板，从 Web 服务加载。

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

模板列出了每个 Provider，每个 Provider 都包含一个链接，单击该链接会展开 Bootstrap Accordion 并调用 ViewModel 函数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>

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

我真正想要 loadVenues() 做的是通过 Provider Id 从 web 服务中提取 Venue 数据（我可以这样做）并将检索到的 ProviderVenues 数据绑定到被单击的嵌套模板。

我完全不知道如何做到这一点，并认为我可能走错了路。有人可以指出我正确的方向吗？

Answer 1

将 LoadVenues 函数移动到 ProviderViewModel，因为它属于那里，然后从那里加载 observableArray。如果你真的，真的需要从父级做，点击处理程序将点击的视图模型作为参数，这样你就可以使用引用加载数组

Example on the parent approach

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