0

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

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

我有一个“提供者”的淘汰赛模板，从 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 数据绑定到被 clicked 的嵌套模板。

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

4

1 回答 1

0

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

Example on the parent approach

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

于 2013-01-18T13:57:01.570 回答