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/

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

1 个答案: