zoukankan      html  css  js  c++  java
  • KnockoutJS-绑定元素

      工作变更,又走回了WPF,一个来月没有接触web开发了,之前的KnockoutJS却不想放弃,继续进行知识的巩固,下个月开始重新走回web开发之路,还是得用回一些习惯了的工具。本次开始接触各绑定元素功能、用法,这些绑定方式是在使用ko过程中用的最多的。

    绑定元素在KnockoutJS中可以分为三大类

      1、文本控制与显示隐藏

      2、流程控制

      3、配合表单使用

    从个人使用过程中应用程度进行排序展示:

    1、value:在DOM元素与viewModel对象的属性间建立桥梁,用户编辑控件时viewModel中对应属性值将自动更新,同样在更新了对应属性后,用户控件展示数据也将自动更新。常用于input、select、textarea等控件;

    2、text:绑定到DOM元素上,将viewModel对象的属性的值展示在绑定元素上。常用于p、pre、label、span、th、td等控件使用;

    3、click:绑定到DOM元素上添加事件句柄,当点击事件被触发时,执行我们定义好的JS函数。常用于button、input、a等控件使用。

      click说明:在绑定函数时,可以指定任意函数,即在viewModel中声明的函数和在viewModel之外声明的函数都可被调用,同时在调用viewModel之内的函数时可以直接写函数名,而无需带上viewModel对象名。

    4、visible:绑定到DOM元素上,该元素的隐藏或显示将有viewModel的属性状态、函数返回值或表达式来决定。

    针对前四个绑定元素,简单演示一下功能:

    Html:

     1 <div>
     2     <label>公司名称</label>
     3     <input type="text" data-bind="value:unitName" /><br />
     4     <label>公司地址</label>
     5     <input type="text" data-bind="value:address" /><br />
     6     <p data-bind="text:'您的公司名称为:'+unitName()+',公司地址是:'+address()+' .'"></p>
     7     <pre data-bind="text:'您的公司名称为:'+unitName()+',公司地址是:'+address()+' .'"></pre>
     8     <label data-bind="text:'您的公司名称为:'+unitName()+',公司地址是:'+address()+' .'"></label><br />
     9     <span data-bind="text:'您的公司名称为:'+unitName()+',公司地址是:'+address()+' .'"></span><br />
    10     <table>
    11         <tr>
    12             <th data-bind="text:unitName"></th>
    13         </tr>
    14         <tr>
    15             <td data-bind="text:address"></td>
    16         </tr>
    17     </table>
    18     <div data-bind="visible:visibleButton">
    19         <button data-bind="click: updateUnitName">修改公司名称为中部星城科技</button><br />
    20         <button data-bind="click: updateAddress">修改公司地址为湖南长沙雨花区</button>
    21     </div>
    22     <div>
    23         <button data-bind="click:function(){viewModel.visibleButton(false);}">隐藏上面两个按钮</button>
    24     </div>
    25 </div>

    JS代码:

     1 <script type="text/javascript">
     2     var viewModel = {
     3         //value、text
     4         unitName: ko.observable(""),
     5         address: ko.observable(""),
     6 
     7         //click
     8         //viewModel内JS函数
     9         updateAddress: function () {
    10             this.address("湖南长沙雨花区");
    11         },
    12 
    13         //visible
    14         visibleButton: ko.observable(true),
    15     };
    16 
    17     //任意JS函数
    18     function updateUnitName() {
    19         viewModel.unitName("中部星城科技");
    20     }
    21 
    22     $(function () {
    23         ko.applyBindings(viewModel);//完成绑定
    24     });
    25 </script>

     动画效果图:

    5、options:该绑定元素只用于在select中使用,通过关联viewModel中提供的数组,使得select控件能够展示出数组中的所有项。

      options,用于绑定下拉列表中各项(可选参数-optionsCaption,在默认情形下不想选择任何一个option项时,给予提示语,诸如“---请选择---”、或“---------”之类的,作为默认选项,该项的值为undefined)。

      optionsText,用于确定下拉列表中每一项的指定属性作为展示列,并可以在此基础上进行扩展,将指定属性传入函数中加工返回新的展示信息,。

      optionsValue,用于确定下拉列表中每一项的指定属性作为标识列。

    6、checked:绑定到type为checkbox的input控件上,关联viewModel的属性状态,相互间的变动都会使得双方更新状态,状态有选中和未选中。仅用于input控件指定类型为checkbox时使用。

    7、css:将一个或多个class动态绑定到DOM元素上,根据具体业务变更绑定的class。常用于class之间大范围样式的切换,通过设计JS函数完成指定class是否启用。注意:在设计class时如果存在不合法的命名下,如my-class需转换为‘my-class’。

    8、style:作用效果小于css,将一个或多个style的值绑定到DOM元素上,常用于单个或少数量style变更时使用。

    9、attr:更改DOM元素的任何属性值,关联viewModel上对应的attr属性值,便于动态更改展示。注意:在取属性名称时如果存在不合法的命名下,如data-something需转换为'data-something'。

    针对该五个绑定元素,简单演示一下功能:

    Html:

     1 <div style="margin-top:50px;">
     2     <style type="text/css">
     3         .testClass {
     4             background-color: #ffd800;
     5             font-size: 16px;
     6         }
     7     </style>
     8     <label>公司类型:</label>
     9     <select data-bind="options:unitTypeOptions, optionsCaption:'---请选择公司类型---',optionsText: 'text', optionsValue: 'value', value:choiceUnitTypeValue"></select><br />
    10     <input type="checkbox" data-bind="checked:visibleLabel" /><label data-bind="css: { testClass: visibleLabel}">启用展示</label>
    11     <label data-bind="text:'选中值:'+choiceUnitTypeValue(),visible:visibleLabel"></label><br />
    12     <a data-bind="attr: { title: tips},style:{'background-color':visibleLabel()?'red':'white'}">公司官网</a>
    13     <button data-bind="click:function(){viewModel.tips('knockoutJS');}">切换a标签提示信息</button>
    14 </div>

    JS代码:

     1 <script type="text/javascript">
     2     var viewModel = {
     3         //value、text
     4         unitName: ko.observable(""),
     5         address: ko.observable(""),
     6 
     7         //click
     8         //viewModel内JS函数
     9         updateAddress: function () {
    10             this.address("湖南长沙雨花区");
    11         },
    12 
    13         //visible
    14         visibleButton: ko.observable(true),
    15 
    16         //options
    17         unitTypeOptions: ko.observableArray([
    18             { text: "有限公司", value: "1" },
    19             { text: "有限责任公司", value: "2" },
    20             { text: "国有独资公司", value: "3" },
    21             { text: "股份有限公司", value: "4" }
    22         ]),
    23         choiceUnitTypeValue: ko.observable(),
    24 
    25         //checked
    26         visibleLabel: ko.observable(true),
    27 
    28         //attr
    29         tips: ko.observable("hello"),
    30     };
    31 
    32     //任意JS函数
    33     function updateUnitName() {
    34         viewModel.unitName("中部星城科技");
    35     }
    36 
    37     $(function () {
    38         ko.applyBindings(viewModel);//完成绑定
    39     });
    40 </script>

    动画效果图:

    10、html:绑定到DOM元素上,并将viewModel的属性值作为展示,与text用法相同,但不同处在于,html可以将内容中存在的html标记渲染为真实的html内容。(个人建议少用或不用)

    11、event:为DOM元素的事件添加指定的事件句柄,事件被触发时执行我们定义好的逻辑。常用在keypress、mouseover、mouseout事件上。与click用法一样,可以设置为任意的js函数。

    12、submit:绑定在表单上用于提交时拦截默认表单提交动作,执行我们定义好的逻辑,然后真正执行提交操作,该提交表单操作可以是原有form表单提交,也可以是我们设计的表单提交,通过参数设置。仅用于form控件。

    13、enable:绑定DOM元素自身的启用禁用状态,关联viewModel的属性状态,来控制该DOM元素的启用。常用于input、select、textarea等控件中。

    14、disable:与enable功能相同,使用方式相反,当disable为true时将被禁用。常用于input、select、textarea等控件中。

    15、selectedOptions:在multi-select列表中,选择一个或多个项,并将选中的项加入到selectedOptions关联的viewModel的属性数组中。常用于多选项选择。

    针对该六个绑定元素,简单演示一下功能:

    Html:

     1 <div style="margin-top:50px;">
     2     <label>html元素所绑定的内容为:</label>
     3     <label data-bind="html:htmlContent"></label><br />
     4     <div data-bind="event:{mouseover:buttonKeyPress}">
     5         鼠标移入改变html元素绑定内容
     6     </div>
     7     <hr />
     8     <form action="@Url.Action("CreateUser")" method="post" data-bind="submit:submitForm">
     9         <label>用户名:</label>
    10         <input type="text" name="userName" data-bind="enable:userNameEnable" />
    11         <label>密码:</label>
    12         <input type="text" name="password" data-bind="disable:passwordDisable" />
    13         <input type="submit" value="增加" />
    14     </form><br />
    15     <button data-bind="click:function(){viewModel.userNameEnable(true);}">启用用户名输入</button>
    16     <button style="margin-left:10px;" data-bind="click:function(){viewModel.passwordDisable(false);}">启用密码输入</button><br />
    17     <hr />
    18     <p>
    19         <select data-bind="options: companyOptions,selectedOptions: chosenCompanies" size="5" multiple="true"></select>
    20         <select data-bind="options: chosenCompanies," size="5"></select>
    21     </p>
    22 </div>

    JS代码:

     1 <script type="text/javascript">
     2     var viewModel = {
     3           
     4         //html
     5         htmlContent: ko.observable("<a href='#'>百度一下</a>"),
     6 
     7         //event
     8         buttonKeyPress: function () {
     9             this.htmlContent("keyPress事件被触发!");
    10         },
    11 
    12         //submit
    13         submitForm: function (formElement) {
    14             //执行逻辑
    15             //执行表单提交
    16             //或返回到默认表单提交return true
    17             return true;
    18         },
    19 
    20         //enable
    21         userNameEnable: ko.observable(false),
    22 
    23         //disable
    24         passwordDisable: ko.observable(true),
    25 
    26         //selectedOptions
    27         companyOptions: ko.observableArray(['百度', '阿里', '腾讯']),
    28         chosenCompanies: ko.observableArray(['百度'])
    29     };
    30 
    31     //任意JS函数
    32     function updateUnitName() {
    33         viewModel.unitName("中部星城科技");
    34     }
    35 
    36     $(function () {
    37         ko.applyBindings(viewModel);//完成绑定
    38     });
    39 </script>

    动画效果图:

    16、uniqueName:绑定DOM元素有一个非空的name属性,在没有设置name属性下,会绑定上一个而唯一的name属性。(使用场景太少,个人还没有使用过)

    0、foreach: 绑定到DOM元素上,将关联的viewModel中指定集合或数组循环输出,并动态更改html代码。配合table、div等控件使用。(个人最喜欢的绑定元素,强大的存在)

    Html:

     1 <table class="table table-bordered" style="margin-top:5px;">
     2     <thead>
     3         <tr>
     4             <th>公司名称</th>
     5             <th>公司地址</th>
     6             <th></th>
     7         </tr>
     8     </thead>
     9     <tbody data-bind="foreach:unitList">
    10         <tr>
    11             <td><input type="text" data-bind="value:unitName" /></td>
    12             <td><input type="text" data-bind="value:address" /></td>
    13             <td><button class="btn btn-danger" data-bind="click:$root.removeUnitInfo">删除</button></td>
    14         </tr>
    15     </tbody>
    16     <tfoot>
    17         <tr>
    18             <td colspan="3">
    19                 <button type="button" class="btn btn-primary" data-bind="click:addUnitInfo">增加</button>
    20             </td>
    21         </tr>
    22     </tfoot>
    23 </table>
    24 <div>
    25     <label>现有公司信息列表:</label>
    26     <div data-bind="foreach:unitList">
    27         <label data-bind="text:'公司名称:'+unitName()+'.公司地址:'+address()+'.'"></label><br />
    28     </div>
    29 </div>

    JS代码:

     1 <script type="text/javascript">
     2     function unitViewModel(name, addressInfo) {
     3         unitName = ko.observable(name);
     4         address = ko.observable(addressInfo);
     5     }
     6 
     7     var viewModel = {
     8         unitList: ko.observableArray(),
     9 
    10         addUnitInfo: function () {
    11             viewModel.unitList.push(new unitViewModel("", ""));
    12         },
    13         removeUnitInfo: function (unit) {
    14             viewModel.unitList.remove(unit);
    15         },
    16     };
    17 
    18     $(function () {
    19         ko.applyBindings(viewModel);//完成绑定
    20         viewModel.unitList.push(new unitViewModel("星城科技", "湖南-长沙"));
    21         viewModel.unitList.push(new unitViewModel("星城集团", "湖南-长沙"));
    22         viewModel.unitList.push(new unitViewModel("中车集团", "湖南-株洲"));
    23     });
    24 </script>

    动画效果图:

     本次对于所有绑定元素进行了简单的功能讲解和操作,后期将会综合运用这些完成一些功能。

     代码地址:https://gitee.com/530521314/Partner.TreasureChest.git

    2018-08-26,望技术有成后能回来看见自己的脚步
  • 相关阅读:
    pat 甲级 1065. A+B and C (64bit) (20)
    pat 甲级 1064. Complete Binary Search Tree (30)
    pat 甲级 1010. Radix (25)
    pat 甲级 1009. Product of Polynomials (25)
    pat 甲级 1056. Mice and Rice (25)
    pat 甲级 1078. Hashing (25)
    pat 甲级 1080. Graduate Admission (30)
    pat 甲级 团体天梯 L3-004. 肿瘤诊断
    pat 甲级 1099. Build A Binary Search Tree (30)
    Codeforce 672B. Different is Good
  • 原文地址:https://www.cnblogs.com/CKExp/p/9296339.html
Copyright © 2011-2022 走看看