MVVM架构~knockoutjs系列之级联select-低调大师

MVVM架构~knockoutjs系列之级联select

2017-12-05 498

对于下拉列表框的绑定在之前的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 == "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 -->

效果截图

本文转自博客园张占岭（仓储大叔）的博客，原文链接：MVVM架构~knockoutjs系列之级联select，如需转载请自行联系原博主。

微信关注我们

原文链接：https://yq.aliyun.com/articles/336673

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

MVVM架构~knockoutjs系列之验证信息自定义输出

这个文章非常重要,也是非常必要的,在我们进行项目开发时,后台无所谓,对样式无要求,而网站前台来说,对样式要求严格,你的验证信息都是前台设计好的,所以,不能使用knockoutjs自带的了,我们需要将验证的消息输出到指定的元素上! 在写这个文章之前,我一直没有找到好的办法来实现这种功能,但我没有放弃,终于今天找到了比较不错的解决方案,对于一个元素的验证我们可以使用isValid()方法,而对于它的错误消息的显示,我们可以使用error()方法,注意是error()不是errors(),从这一点上我们可以看到,它是针对某点元素来说的,因为它是单数,呵呵. 功能实现 Html代码 <div class="fcs-item clearfix"> <p class="thd"><span class="rstar">*</span> 班级圈名称：</p> <p class="t-name"> <input class="cname" style="width: 356px;" type="text" ...

2017-12-06

419

本文章应该是knockoutjs系列的最后一篇了，前几篇中主要讲一些基础知识，这一讲主要是一个实际的例子，对于一个对象的添加与编辑功能的实现，并将项目源代码公开了，共大家一起学习！ knockoutjs系列目录 MVVM架构~Knockoutjs系列之text,value,attr,visible,with的数据绑定 MVVM架构~Knockoutjs系列之对象与对象组合 MVVM架构~Knockoutjs系列之js接收C#数据集合的方式 MVVM架构~Knockoutjs系列之验证机制的引入 MVVM架构~knockoutjs实现简单的购物车 MVVM架构~knockoutjs与MVC配合，实现列表的增删改功能 MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法 MVVM架构~knockoutjs系列之正则表达式使规则更灵活 MVVM架构~knockoutjs系列之验证成功提示显示项目相关截图添加页面截图编辑页面截图 Knockoutjs项目原代码 MVVM.sln 感谢大家对我的支持，如果本文章对您有所帮助，就讲顶一下吧...

2017-12-06

560

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。