0

私が達成しようとしているのは、LoadVenues()関数がネストされた foreach テンプレートを設定することです。

Provider.ProviderVenues コレクションを持つプロバイダーの配列があります。プロバイダーごとに ProviderVenues を設定したくありません。ユーザーがプロバイダーをクリックして、クリックしたプロバイダーの ProviderVenues コレクションを「オンデマンド」で取得できるようにしたいと考えています。

Web サービスからロードされた「プロバイダー」の foreach テンプレートのノックアウトがあります。

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

テンプレートには各プロバイダーがリストされ、それぞれにリンクが含まれており、クリックすると Bootstrap アコーディオンが展開され、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()にやりたいことは、Web サービスからプロバイダー Id (私ができること) によって Venue データを取得し、取得した ProviderVenues データを、クリックされたネストされたテンプレートにバインドすることです。

これを行う方法について完全に困惑しており、間違った方向に進んでいる可能性があると思います。誰かが私を正しい方向に向けることができますか?

4

1 に答える 1

0

LoadVenues 関数は ProviderViewModel に属しているためそこに移動し、そこから observableArray をロードするだけです。本当に、本当に親から行う必要がある場合は、クリックハンドラーがクリックされたビューモデルを引数として受け取るため、参照を使用して配列をロードできます

Example on the parent approach

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

于 2013-01-18T13:57:01.570 に答える