中文字幕精品亚洲无线码二区,国产黄a三级三级三级看三级,亚洲七七久久桃花影院,丰满少妇被猛烈进入,国产小视频在线观看网站

MVVM架(jia)構~knockoutjs系列之級聯select

返回目錄

對(dui)(dui)于下拉列表框的(de)(de)綁(bang)(bang)定(ding)在之(zhi)前的(de)(de)knockoutjs文章中已經介紹過，今天(tian)主(zhu)要說(shuo)(shuo)一下級聯(lian)的(de)(de)select，事(shi)實上，在knockoutjs里，是以(yi)數據綁(bang)(bang)定(ding)為(wei)中心的(de)(de)，而(er)數據是以(yi)面向(xiang)對(dui)(dui)象(xiang)為(wei)前提的(de)(de)，而(er)對(dui)(dui)于級聯(lian)綁(bang)(bang)定(ding)來說(shuo)(shuo)，它也是一種面向(xiang)對(dui)(dui)象(xiang)里關系(xi)對(dui)(dui)象(xiang)的(de)(de)體現，有了(le)關系(xi)對(dui)(dui)象(xiang)，我(wo)們就可以(yi)把級聯(lian)很容易的(de)(de)開發出來，而(er)不用像之(zhi)前JS那么麻煩了(le)。

準備數據對象

    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();

        /*
        當前(qian)選(xuan)中(zhong)的年(nian)級(ji)ＩＤ為self.grade().id
        當前(qian)選(xuan)中(zhong)的學科(ke)ＩＤ為self.subject().id

        ＨＴＭＬ代碼(ma)：
        <select data-bind="
                   options: Grades,
                   optionsText: 'name',
                   value:grade,
                   optionsCaption: '選(xuan)擇年(nian)級(ji)'">
　　　　</select>
　　　　<span data-bind="with:grade">
　　　　    <select data-bind="
　　　　               visible: $parent.grade,
　　　　               options: Subjects,
　　　　               optionsText: 'name',
　　　　               value:$parent.subject,
　　　　               optionsCaption: '選(xuan)擇學科(ke)'">
　　　　    </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 == "2") {
            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 -->

效果截圖

返回目錄

 

posted @ 2014-03-23 20:35  張占嶺  閱讀(7552)  評論(4)    收藏  舉報