使用复杂的 json 对象和剔除绑定创建父/子下拉列表

Question

我有一个 json 对象，其中包含站点和站点的客户端。一个站点 可以有很多客户。

我知道如何使用 淘汰赛绑定。但是，我无法弄清楚如何填充 当 onchange 发生在父级时，客户端下拉列表（子级） 下拉列表。

如果有更多经验的人可以改变我的 下面的代码向我展示如何实现主/子下拉列表 功能。

干杯

C

    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>

Answer 1

Knockout 对下拉列表有特定的绑定。看看“选项”绑定：http://knockoutjs.com/documentation/options-binding.html

这是您示例的 jsFiddle：http://jsfiddle.net/9QVw9/