MVVM架构~knockoutjs系列之级联select

返回目录

对于下拉列表框的绑定在之前的knockoutjs文章中已经介绍过，今天主要说一下级联的select，事实上，在knockoutjs里，是以数据绑定为中心的，而数据是以面向对象为前提的，而对于级联绑定来说，它也是一种面向对象里关系对象的体现，有了关系对象，我们就可以把级联很容易的开发出来，而不用像之前JS那么麻烦了。

准备数据对象

    var Grade_Subject_R = function () {
        var self = this;
        self.Grades = [
           {

               'subjects': [{ 'id': '1', 'name': '语文' },
                            { 'id': '2', 'name': '数学' },
                            { 'id': '3', 'name': '英语' }],
               'arid': '1',
               'name': '小学'
           },
           {

               'subjects': [{ 'id': '1', 'name': '语文' },
                            { 'id': '2', 'name': '数学' },
                            { 'id': '3', 'name': '英语' },
                            { 'id': '4', 'name': '物理' },
                            { 'id': '22', 'name': '化学' },
                            { 'id': '23', 'name': '生物' }],
               'arid': '2',
               'name': '初中'
           },
           {
               'subjects': [{ 'id': '1', 'name': '语文' },
                            { 'id': '2', 'name': '数学' },
                            { 'id': '3', 'name': '英语' },
                            { 'id': '4', 'name': '物理' },
                            { 'id': '22', 'name': '化学' },
                            { 'id': '23', 'name': '生物' },
                            { 'id': '24', 'name': '历史' }],
               'arid': '3',
               'name': '高中'
           }
        ];

        self.grade = ko.observable();
        self.subject = ko.observable();

        /*
        当前选中的年级ＩＤ为self.grade().id
        当前选中的学科ＩＤ为self.subject().id

        ＨＴＭＬ代码：
        <select data-bind="
                   options: Grades,
                   optionsText: 'name',
                   value:grade,
                   optionsCaption: '选择年级'">
　　　　</select>
　　　　<span data-bind="with:grade">
　　　　    <select data-bind="
　　　　               visible: $parent.grade,
　　　　               options: Subjects,
　　　　               optionsText: 'name',
　　　　               value:$parent.subject,
　　　　               optionsCaption: '选择学科'">
　　　　    </select>
　　　　 </span>

         <span data-bind="with:grade">
             <!-- ko foreach: Subjects -->
             <input type="checkbox" data-bind="value: id, checked: $root.subject" />
             <span data-bind="text: name"></span>
             <!-- /ko -->
         </span>

        */

    }

JS代码

 var model = new Grade_Subject_R();
    ko.applyBindings(model);

    for (var i in model.Grades) {
        if (model.Grades[i].arid == "") {
            model.grade(model.Grades[i]);
            break;
        }
    }

HTML代码

    <select data-bind="
                     options: Grades,
                     optionsText: 'name',
                     value:grade,
                     optionsCaption: '选择年级'">
    </select>
    <!-- ko with:grade -->
    <select data-bind="
                        visible:$parent.grade,
                        options: subjects,
                        optionsText: 'name',
                        value:$parent.subject,
                        optionsCaption: '选择学科'">
    </select>
    <!-- /ko -->

效果截图

aaarticlea/png;base64,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" alt="" />

aaarticlea/png;base64,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" alt="" />

返回目录