0

サイトとサイトのクライアントを持つjsonオブジェクトがあります。1 つのサイトに多数のクライアントを含めることができます。

ノックアウト バインディングを使用して、サイトのドロップダウン リスト ボックス (親) にデータを入力する方法を知っています。ただし、親のドロップダウン リストで onchange が発生したときに、クライアントのドロップダウン リスト (子) を設定する方法がわかりません。

経験豊富な方が以下のコードを変更して、マスター/子ドロップダウン リスト機能を実現する方法を教えていただければ幸いです。

乾杯

ハ

    var posterArray = ([
                           { SiteId: 1,
                             SiteName: "Mail",
                             ClientSite:[
                                { ClientId: 1, ClientName: "Mail Client A" }, { ClientId: 1, ClientName: "Mail Client B"}]  
                           },

                           { SiteId: 2,
                             SiteName: "DSAC",
                             ClientSite:
                                { ClientId: 1, ClientName: "DSAC Client A" }
                           }
    ]);


    var ViewModel = function () {
        var self = this;

        // Poster
        self.PosterList = ko.mapping.fromJS([]);
        self.PosterListEnable = false;

        self.refreshPosterList = function () {
            var data = [];
            if (posterArray.length == 0) {
                data = [{ SiteId: 'No Posters', SiteName: 'No Posters'}];
            } else if (posterArray.length == 1) {
                data = posterArray;
            } else {
                data = [{ SiteId: 'Select a Poster', SiteName: 'Select a Poster'}];
                data.push.apply(data, posterArray);
            }

            ko.mapping.fromJS(data, null, self.PosterList);
            self.refreshClientList();
        };


        //Client
        self.ClientList = ko.mapping.fromJS([]);
        self.refreshClientList = function () {

        };

    };

    var viewModel = new ViewModel();

    $(function () {

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

</script>
<fieldset class="SearchFilter">
    <legend>Search Filter</legend>
    <div class="SearchItem">
        <span>Poster:</span>
        <select id="dllPoster" data-bind="foreach: PosterList, disable:PosterList().length <= 1" onchange="viewModel.refreshClientList();">
            <option data-bind="text: SiteName, attr:{value:SiteId}"></option>
        </select>
        <select id="ddlClient" data-bind="with: PosterList.ClientSite ">
            <option data-bind="text: ClientName, attr:{value:ClientId}"></option>
        </select>
    </div>
</fieldset>

4

1 に答える 1

1

Knockout には、ドロップダウン リストに固有のバインディングがあります。「オプション」バインディングを見てください: http://knockoutjs.com/documentation/options-binding.html

これがあなたの例のjsFiddleです：http://jsfiddle.net/9QVw9/

于 2012-04-05T01:05:18.980 に答える