【4858美高梅】表单的用法,KnockoutJS基础知识

By admin in 4858美高梅 on 2019年3月26日

  干活转移,又走回了WPF,1个来月没有接触web开发了,以前的KnockoutJS却不想丢弃,继续进行文化的巩固,下个月发轫重复走回web开发之路,依旧得用回部分习惯了的工具。这一次初叶接触各绑定成分效率、用法,这个绑定方式是在使用ko进度中用的最多的。

前言

① 、HTML表单的用处

粗略说便是html通过表单收集用户音信(即:分化品类数据)并交由后台服务器,以便于用户和WEB服务器的互动。

大家好,小编是IT修真院东方之珠分院第贰3期学生。前天小课堂的主要内容是,input表单的选择,还有在html5中新增的天性。

  本文地址: 

click绑定在DOM成分上加上事件句柄以便成分被点击的时候实施定义的JavaScript
函数。大多数是用在button,input和连接a上,然而能够在任意元素上运用。

二 、HTML表单成分

HTML表单成分首要包蕴input、label、select、textarea等要素。

注:form的”action”属性用来指定处理该表单的后台程序URL,“method”属性用于指定传送数据的方式post还是get(默认)

表单成分是允许用户在表单中(比如:文本域,下拉列表,单选框,复选框等等)输入消息的成分,最重点的效益正是采访音信。表单成分是页面中不得缺点和失误的要素,在最新的H5中,表单成分也新增了部分质量,在页面营造中表述了重点的功效。一般的话,表单包蕴如下多少个部分:

  本文demo地址:

简单示例

2.1、input元素

   <input type="text">:定义用于文本输入的单行输入字段(默认宽度为20个字符)
   <input type="password">:定义密码字段
   <input type="radio">:定义单选按钮,允许用户在有限数量的选项中选择一个
   <input type="checkbox">:定义复选框
   <input type="submit">:定义用于向表单处理程序提交表单的按钮。
   <input type="button">:定义按钮
   <input type="number">:用于应该包含数字值的输入字段
   <input type="date">:用于应该包含日期的输入字段
   <input type="color">:用于应该包含颜色的输入字段,根据浏览器支持,颜色选择器会出现输入字段中。
   <input type="range">:用于应该包含一定范围内的值的输入字段,根据浏览器支持,输入字段能够显示为滑动控件
   <input type="month">:允许用户选择月份和年份,根据浏览器的支持,日期选择器会出现在输入字段中
   <input type="week">:允许用户选择周和年,根据浏览器支持,日期选择器会出现输入字段中。
   <input type="time">:允许用户选择时间(无时区),根据浏览器支持,时间选择器会出现输入字段中。
   <input type="datetime">:允许用户选择日期和时间(有时区),根据浏览器支持,日期选择器会出现输入字段中。
   <input type="datetime-local">:允许用户选择日期和时间(无时区),根据浏览器支持,日期选择器会出现输入字段中。
   <input type="email">:用于应该包含电子邮件地址的输入字段,根据浏览器支持,能够在被提交时自动对电子邮件地址进行验证。
   <input type="search">:用于搜索字段(搜索字段的表现类似常规文本字段)。
   <input type="tel">:用于应该包含电话号码的输入字段,目前只有Safari 8支持该类型
   <input type="url">:用于应该包含URL地址的输入字段,根据浏览器的支持,在提交时能够自动验证url字段。

注:input标签的”placeholder”属性用于展示提示语,”accept”属性用来选择上传文件的属性。
  1. 提醒音信:表单中隐含的表达性文字

  2. 表单控件:包含了切实可行的表单效率项

  3. 表单域:容纳全部表单控件和提示消息

 

4858美高梅 1

2.2、label元素

label标签用于关联控件常与input标签一起行使
。label的”for”属性一般与input的”id”属性一致(绑定)

常用的表单成分,包罗:

 全数绑定成分介绍:

从个体利用进程中动用水平实行排序展现:

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     <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>

 动画功能图:

4858美高梅 2

 

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>

动画片效果图:

4858美高梅 3

 

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>

动画片效果图:

4858美高梅 4

16、uniqueName:绑定DOM成分有3个非空的name属性,在并未安装name属性下,会绑定上1个而唯一的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>

动画片效果图:

4858美高梅 5

 

本次对于拥有绑定成分实行了简单的效率讲解和操作,前期将会综合选拔这一个形成都部队分职能。

  本文地址: 

  本文demo地址:

 

 

2018-08-26,望技术有成后能回来看见自己的脚步

 

<h2>ClickBind</h2>
<div>
    You've clicked  times
    <button data-bind="click: incrementClickCounter">Click me</button>
</div>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script> 
<script type="text/javascript">
    var viewModel = {
        numberOfClicks: ko.observable(0),
        incrementClickCounter: function() {
            var previousCount = this.numberOfClicks();
            this.numberOfClicks(previousCount + 1);
        }
    };
    ko.applyBindings(viewModel);
</script>

2.3、select元素

select标签和option标签用于体现下拉菜单,示例如下:

<select name="city">
                <option value="beijing">北京</option>
                <option value="shanghai" selected="selected">上海</option>
                <option value="hangzhou">杭州</option>
</select>
  1. form: 定义供用户输入的表单。

  2. 田野(field)set: 定义域。即输入区加有文字的边框。

  3. legend:定义域的标题,即边框上的文字。

  4. label:定义2个说了算的竹签。如输入框前的文字,用以关联用户的挑选。

  5. input: 定义输入域,常用。可设置type属性,从而具有不一样功效。

  6. textarea:
    定义文本域(七个多行的输入控件),默承认由此鼠标拖动调整大小。

  7. 【4858美高梅】表单的用法,KnockoutJS基础知识。button: 定义3个按钮。

  8. select: 定义1个选项列表,即下拉列表。

  9. option: 定义下拉列表中的选项。

4858美高梅 6

2.4、textarea元素

<textarea> 成分定义多行输入字段(文本域),示例如下:

<textarea name="article">
                多行文本,注意type=text和type=password的区别
</textarea>

接下去是对那几个表单元素的具体分析。

预览效果

<form name=”” action=”” method=”get”>……</form>

4858美高梅 7  

name : 表单名称;action : 用来钦定表单处理程序的地点(url);method :
定义表单结果从浏览器传送到服务器的法子,暗许为”get”(也能够是post)

每一趟点击按钮的时候,都会调用incrementClickCounter()函数,然后更新自动更新点击次数。

<input type=”” name=”” value=”” size=””>

您能够申明任何JavaScript函数 – 不肯定非若是view
model里的函数。你能够表明任意对象上的其它函数,例如:
someObject.someFunction。

name:控件名称;value:input控件暗许文本值;size:input控件在页面中的显示上涨幅度(必须是正整数)

View
model上的函数在用的时候有一小点特有,便是不需求引用对象的,直接引用函数自身就行了,比如直接写incrementClickCounter
就能够了,而无需写成: viewModel.incrementClickCounter(就算是法定的)。

input常用type属性如下:

传参数给你的click 句柄

  1. text:单行文本输入框,能够通过正整数的size控制框长度。

  2. password:密码输入框。

  3. radio:单选按钮,同一组的单选按钮必要求有同样的name。

  4. checkbox:复选框,同一组的单选按钮必供给有一致的name。

  5. button:普通按钮。

  6. submit:提交按钮,每出现三次,1个 Submit 对象就会被创制。

  7. reset:重置按钮,会重置当前表单中任何的剧情。

  8. image:图像方式的交付按钮,写法是“”。

  9. hidden:隐藏域,隐藏字段对于用户是不可知的。

  10. file:文件域,用于文书上传。

 最不难易行的办法是传叁个function包装的匿名函数:

<select size=”” multiple=”multiple”>

<button data-bind="click: function() { viewModel.myFunction('param1', 'param2') }">
    Click me
</button>

<option hidden>选项1</option>

如此,KO就会调用那一个匿名函数,里面会实施viewModel.myFunction(),并且传进了’param1′
和’param2’参数。

……

访问事件源对象

</select>

 有个别情况,你恐怕供给运用事件源对象,Knockout会将那几个目的传递到你函数的第三个参数:

size:下拉菜单的可知选项数;multiple:多选。

4858美高梅 8

在新式的html5中,有部分表单的新增属性,多用来js,如

<button data-bind="click: myFunction">
    Click me   event
</button>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script> 
<script type="text/javascript">
    var viewModel = {
        numberOfClicks: ko.observable(0),
        incrementClickCounter: function() {
            var previousCount = this.numberOfClicks();
            this.numberOfClicks(previousCount + 1);
        },
        myFunction: function (event) {
            //////
        }
    };
    ko.applyBindings(viewModel);
</script>

datalist :
定义填写3个input时,提示多少个option用于提示。可经过input的list脾气与此成分作关联。

4858美高梅 9

output :
表示总括的结果。可经过for脾性与任何能够影响运算的成分(如input)作关联。

设若您须要的话,能够行使匿名函数的首先个参数字传送进去,然后在其间调用:

还有局地新增的type属性:

<button data-bind="click: function(event) { viewModel.myFunction(event, 'param1', 'param2') }">
    Click me
</button>

1.
search:input会呈现为搜索框(与text类型的唯一分化在于当鼠标覆盖时尾部冒出叉号可火速排除输入的始末)。

诸如此类,KO就会将事件源对象传递给您的函数并且使用了。

  1. tel:编辑电话号码的控件,提交时换行符会自动从输入框中去掉。

  2. url:编辑url的控件,提交时换行符与第五人的空格都将活动删除。

  3. email:可输入三个邮件地址。

  4. color : 选用颜色的控件。

  5. date : 选择年月日的控件。

允许实施默许事件

此外,还有time、datetime、datetime-local、month、week、number、range类型。

私下认可情状下,Knockout会阻止冒泡,防止暗中同意的轩然大波继续执行。例如,如若你点击三个a连接,在执行完自定义事件时它不会连接受href地址。那特别有用是因为您的自定义事件非同一般就是操作你的view
model,而不是连接受其它四个页面。

html5中input新增的一对较常用的特征:

自然,假若您想让默许的轩然大波继续执行,你可以在你click的自定义函数里再次来到true。

1.
list:关联datalist所用的该datalist的id(即datalistform外建立,通过list关联即可)。

防止事件冒泡

2.
pattern:3个正则表达式,用于检检查和控制件的值,可职能于text、search、tel、url、email类型的input。

暗中同意情形下,Knockout允许click事件后续在更高级中学一年级层的事件句柄上冒泡执行。例如,要是您的要素和父成分都绑定了click事件,这当你点击该因素的时候七个事件都会接触的。倘使急需,你能够经过额外的绑定clickBubble来禁止冒泡。例如:

3.
form:3个字符串(为涉嫌的form表单的id),用于评释该input属于哪个form表单(功用类似list)。

<div data-bind="click: myDivHandler">
    <button data-bind="click: myButtonHandler, clickBubble: false">
        Click me
    </button>
</div>

4.
formmethod:注明使用GET依然POST,能遮盖form表单的method。仅在type为image或submit,且上边的form特性被安装的情景下才能应用。相似的有formtarget脾性。

私下认可意况下,myButtonHandler会先实施,然后会冒泡执行myDivHandler。但万一你设置了clickBubble为false的时候,冒泡事件会被明确命令禁止

5.
readonly:二个boolean值,注解该input值是不是能被用户修改,可用于音信突显等页面。功效于type为hidden、range、color、checkbox、radio、file、button的input将被忽略。

Knockout.Js官网学习(event绑定、submit绑定)

6.
maxlength:type为text、emal、search、password、tel或url(都为文本)时允许输入的最大字符个数。

event绑定

7.
autocomplete:浏览器是或不是基于从前交付的输入状态对此input自动填值(即以option格局匹配在此以前的输入值),取值on或off,暗许on。如在登陆页面不想彰显上叁个登陆的用户名等时,可安装为off。

event绑定在DOM成分上加上钦赐的风浪句柄以便成分被触发的时候实施定义的JavaScript
函数。抢先一半景色下是用在keypress,mouseover和mouseout上。

参考文献

一句话来说示例

1.
html成分-表单成分及实用性质:”
target=”_blank”

 

  1. W3School HTML 表单 :
    ” target=”_blank”

  2. HTML5-input元素新特征

4858美高梅 10

相关ppt见:

<div>
    <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">        Mouse over me    </div>
    <div data-bind="visible: detailsEnabled">        Details    </div>
</div>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>
<script type="text/javascript">
    var viewModel = {
        detailsEnabled: ko.observable(false),
        enableDetails:function() {
            this.detailsEnabled(true);
        },
        disableDetails:function () {
            this.detailsEnabled(false);
        }
    };
    ko.applyBindings(viewModel);
</script>

腾讯录制:

4858美高梅 11

题目整治

即使通过在1个div上绑定三个事件,二个鼠标点上去的mouseover让上边包车型客车div内容展现出来,另三个是鼠标移出mouseout让上面包车型客车div内容再隐蔽。

  1. 采纳input上传文件或图表应该怎么做

您能够注脚任何JavaScript函数 – 不自然非若是view
model里的函数。你能够注解任意对象上的别样函数,例如: event: {
mouseover: someObject.someFunction }。

涉及到angularjs,可参照插件

View
model上的函数在用的时候有一小点例外,便是不须要引用对象的,直接引用函数本身就行了,比如直接写event:
{ mouseover: enableDetails } 就能够了,而无需写成: event: { mouseover:
viewModel.enableDetails }(固然是合法的)。

  1. input为何不使用密闭标签

submit绑定

input为自闭和标签,详见W3C标准

 submit绑定在form表单上助长钦点的事件句柄以便该form被提交的时候实施定义的JavaScript
函数。只好用在表单form成分上。

  1. type=”number”在输入框右边有前后箭头能够加减数字,怎么去掉箭头?

 

利用type=”tel”风尚未入手上下箭头。

 当你采纳submit绑定的时候,
Knockout会阻止form表单暗许的submit动作。换句话说,浏览器会执行你定义的绑定函数而不会付给那些form表单到服务器上。能够很好地
解释那个,使用  submit绑定就是为着处理view
model的自定义函数的,而不是再利用普通的HTML
form表单。要是你要继续执行暗许的HTML
form表单操作,你能够在您的submit句柄里重回true。

submit简单示例

<form data-bind="submit: doSomething">    ... form contents go here ... 
<input type="text" value="1" id="test"/>       
<button type="submit">Submit</button>
</form>

简单的UI元素

        doSomething: function (formElement) {
            alert(formElement[0].outerHTML);
        }

简单的viewModel属性

4858美高梅 12

总括有五个成分3个是录入框,另贰个是submit提交按钮

在form上,你能够使用click绑定代替submit绑定。然则submit能够handle其余的submit行为,比如在输入框里输入回车的时候能够付出表单。

Knockout.Js官网学习(enable绑定、disable绑定)

enable绑定

enable绑定使DOM成分唯有在参数值为
true的时候才enabled。在form表单成分input,select,和textarea上非凡实用。

enable不难示例

 

4858美高梅 13

<h2>enableBind</h2>
<p>    <input type='checkbox' data-bind="checked: hasCellphone"/>    I have a cellphone</p>
<p>    Your cellphone number:    <input type='text' data-bind="value: cellphoneNumber, enable: hasCellphone"/></p>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>
<script type="text/javascript">
    var viewModel = {
        hasCellphone: ko.observable(false),
        cellphoneNumber:ko.observable("")
    };
    ko.applyBindings(viewModel);
</script>

4858美高梅 14

其一例子里,“Your cellphone number”后的text box
初步情形下是剥夺的,唯有当用户点击标签 “I have a
cellphone”的时候才可用。

4858美高梅 15

扬言DOM成分是不是可用enabled。

非布尔值会被分析成布尔值。例如0和null被解析成false,21和非null对象被分析给true。

比方您的参数是observable的,那绑定会随着observable值的更动而活动更新enabled/disabled状态。如若不是,则只会设置1次并且现在不再更新。

随意使用JavaScript表明式

 不紧密限制于变量 –
你能够应用别的JavaScript表明式来决定成分是或不是可用。例如

<button data-bind="enable: parseAreaCode(viewModel.cellphoneNumber()) != '555'">   
   Do something
</button>

disable绑定

disable绑定使DOM成分唯有在参数值为
true的时候才disabled。在form表单元素input,select,和textarea上尤其有效。

disable绑定和enable绑定正好相反,详情请参考enable绑定

Knockout.Js官网学习(value绑定)

前言

value绑定是涉嫌DOM成分的值到view
model的天性上。首借使用在表单控件<input>,<select>和<textarea>上。

当用户编辑表单控件的时候, view
model对应的属性值会自动更新。同样,当您更新view
model属性的时候,相呼应的因素值在页面上也会自动更新。

注:借使你在checkbox或然radio
button上应用checked绑定来读取或然写入成分的 checked状态,而不是value
值的绑定。

简短示例

 代码如下对三个input进行value的质量绑定

4858美高梅 16

<p>Login name: <input data-bind="value: userName"/></p>
<p>Password: <input type="password" data-bind="value: userPassword"/></p>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>  
<script type="text/javascript">
    var viewModel = {
        userName: ko.observable(""),        
        userPassword: ko.observable("abc")
    };
    ko.applyBindings(viewModel);
</script> 

4858美高梅 17

运转后效果为

4858美高梅 18

留神密码的type为password

KO设置此参数为要素的value值。以前的值将被遮住。

   
假若参数是监察和控制属性observable的,那成分的value值将依据参数值的变通而立异,若是否,那成分的value值将只设置壹回并且以往不在更新。

   
假使您提供的参数不是一个数字恐怕字符串(而是对象大概数组)的话,那展现的value值就是yourParameter.toString()
的内容(常常没用,所以最棒都安装为数字依旧字符串)。

    不管怎么时候,只要你更新了成分的值,那 KO都会将view
model对应的属性值自动更新。暗中认可情状下当用户距离大旨(例如onchange事件)的时候,KO才更新这么些值,不过你能够透过第3个参数valueUpdate来专门钦点改变值的时机。

valueUpdate

  如若您使用valueUpdate参数,这正是意味KO将应用自定义的轩然大波而不是暗中同意的距离宗旨事件。下边是部分最常用的选项:

            “change”(暗许值) – 当失去宗旨的时候更新view
model的值,大概是<select> 元素被挑选的时候。

            “keyup” – 当用户敲完3个字符现在立时更新view model。

            “keypress” –
当用户正在敲1个字符但没有自由键盘的时候就立即更新view model。不像
keyup,这么些革新和keydown是千篇一律的。

            “afterkeydown” – 当用户开始输入字符的时候就更新view
model。首若是捕获浏览器的keydown事件或异步handle事件。

        上述那几个选用,假如你想让你的view
model进行实时更新,使用“afterkeydown”是最棒的取舍。

<p>Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'"/></p>
<p>You have typed: </p>

someValue: ko.observable("edit me")

4858美高梅 19

绑定下拉菜单drop-down list(例如SELECT)

 Knockout对下拉菜单drop-down
list绑定有贰个异样的支撑,那便是在读取和写入绑定的时候,这些值可以是任意JavaScript对象,而不用非得是字符串。在您让你用户挑选一组model对象的时候特别有效。具体育赛事例,参考options绑定。

恍如,固然你想创建二个multi-select list,参考selectedOptions绑定。

更新observable和non-observable属性值

 要是您用value绑定将您的表单成分和您的observable属性关联起来,KO设置的2-way的双向绑定,任何一方改变都会更新别的一方的值。

 不过,倘诺您的因素绑定的是3个non-observable属性(例如是3个原始的字符串恐怕JavaScript表明式)
,KO会那样实践:

  1.假若你绑定的non-observable属性是大约对象,例如一个广阔的属性值,KO会设置那几个值为form表单成分的发端值,即便您改
变form表单成分的值,KO会将值重新写回到view
mode的那一个性情。但当那特性子本身改变的时候,成分却不会再变动了(因为不是observable的),所以它然则是1-way绑定。

  2.比方你绑定的non-observable属性是扑朔迷离对象,例如复杂的JavaScript
表达式只怕子属性,KO也会安装那个值为form表单成分的开端值,可是改变form表单成分的值的时候,KO不会再写会view
model属性,那种情状叫one-time-only value setter,不是的确的绑定。

例如:

4858美高梅 20

<p>First value: <input data-bind="value: firstValue"/></p>          <!-- two-way binding -->
<p>Second value: <input data-bind="value: secondValue"/></p>        <!-- one-way binding -->
<p>Third value: <input data-bind="value: secondValue.length"/></p>  <!-- no binding --> 

<script type="text/javascript">
    var viewModel = {
        firstValue: ko.observable("hello"), // Observable
        secondValue: "hello, again"// Not observable
    };
    ko.applyBindings(viewModel);
</script>

4858美高梅 21

 Knockout.Js官网学习(checked
绑定)

前言

checked绑定是涉嫌到checkable的form表单控件到view model上 –
例如checkbox(<input type=’checkbox’>)大概radio button(<input
type=’radio’>) 。当用户check关联的form表单控件的时候,view
model对应的值也会自动更新,相反,借使view
model的值改变了,这控件成分的check/uncheck状态也会跟着变动。

注:对text box,drop-down
list和具备non-checkable的form表单控件,用value绑定来读取和写入是该因素的值,而不是checked绑定。

简简单单示例

 示例代码

4858美高梅 22

<p>Send me spam:<input type="checkbox" data-bind="checked:wantsSpam" /></p>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>   
<script type="text/javascript">
    var viewModel = {
        wantsSpam:ko.observable(true)
    };

    viewModel.wantsSpam(false);
    ko.applyBindings(viewModel);
</script>

4858美高梅 23

运转之后

4858美高梅 24

 对于checkbox,当参数为true的时候,KO会设置成分的意况为checked,反正设置为unchecked。假如您传的参数不是布尔值,那KO将会分析成布尔值。也正是说非0值和非null对象,非空字符串将被解析成true,别的值都被分析成false。

当用户check可能uncheck这一个checkbox的时候,KO会将view
model的属性值相应地设置为true只怕false。

Checkbox关联到数组

4858美高梅 25

<p>Send me spam:<input type="checkbox" data-bind="checked:wantsSpam" /></p>
<div data-bind="visible: wantsSpam">
    Preferred flavors of spam:    
    <div>
        <input type="checkbox" value="cherry" data-bind="checked: spamFlavors"/> Cherry
    </div>    
    <div>
        <input type="checkbox" value="almond" data-bind="checked: spamFlavors"/> Almond
    </div>
    <div>
        <input type="checkbox" value="msg" data-bind="checked: spamFlavors"/> Monosodium Glutamate
    </div>
</div>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>   
<script type="text/javascript">
    var viewModel = {
        wantsSpam: ko.observable(true),
        spamFlavors: ko.observableArray(["cherry", "almond"])
    };
    ko.applyBindings(viewModel);
    viewModel.wantsSpam(false);
    viewModel.spamFlavors.push("msg");
</script

4858美高梅 26

4858美高梅 27

添加radio button

    <div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor"/> Cherry</div> 
    <div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor"/> Almond</div> 
    <div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor"/> Monosodium Glutamate</div>

 

spamFlavor:ko.observable("cherry")

4858美高梅 28

对于radio buttons,KO唯有当参数值等于radio button
value属性值的时候才设置成分为checked状态。所以参数应是字符串。在上头的例证里唯有当view
model 的spamFlavor 属性等于“almond”的时候,该radio
button才会安装为checked。

本来,最可行的是设置一组radio button成分对应到二个单个的view model
属性。确定保证一遍只能采取四个radio
button需求将她们的name属性名都设置成一样的值(例如上个例子的flavorGroup值)。那样的话,三遍就不得不选取二个了。

只要参数是监督检查属性observable的,那成分的checked状态将基于参数值的生成而革新,若是还是不是,那成分的value值将只设置三回并且今后不在更新

Knockout.Js官网学习(options绑定)

前言

options绑定控制什么的options在drop-down列表里(例如:<select>)也许multi-select 列表里 (例如:<select
size=’6′>)展现。此绑定不可能用来<select>之外的成分。关联的数码应是数组(或许是observable数组),&
lt;select>会遍历突显数组里的装有的项。

对此multi-select列表,设置或然取得选取的多项须求运用selectedOptions绑定。对于single-select列表,你也能够接纳value绑定读取或然安装成分的selected项。

Drop-down list

 

4858美高梅 29

<p>Destination country: <select data-bind="options: availableCountries"></select></p>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>  
<script type="text/javascript">
    var viewModel = {        
        availableCountries: ko.observableArray(['France', 'Germany', 'Spain'])  
    };
    ko.applyBindings(viewModel);
    viewModel.availableCountries.push('China');
</script>

4858美高梅 30

4858美高梅 31

 

该参数是叁个数组(也许observable数组)。对各类item,KO都会将它看成1个<option>
添加到<select>里,从前的options都将被删去。

若果参数是3个string数组,那你不必要再声称任何别的参数。<select>成分会将每一种string展现为3个option。
但是,借使你让用户挑选的是三个JavaScript对象数组(不仅仅是string),那就须要安装optionsText和optionsValue
那么些参数了。

假定参数是监督属性observable的,那元素的options项将依照参数值的成形而立异,借使不是,那成分的value值将只设置1遍并且未来不在更新。

 

万一对上边的select UI成分加上multiple=”true”

<select data-bind="options: availableCountries" multiple="true"></select>

4858美高梅 32

那可以说是Multi-select list

Drop-down list体现的任意JavaScript对象,不仅仅是字符串

 

4858美高梅 33

<p>Destination country: <select data-bind="options: availableCountries" multiple="true"></select></p>
<p>    Your country:   
    <select data-bind="options: Countries,optionsText: 'countryName', value: selectedCountry, optionsCaption: 'Choose...'">
    </select>
</p>
<div data-bind="visible: selectedCountry">
       You have chosen a country with population   
    .
</div>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>  
<script type="text/javascript">
    var Country = function (name, population) {
        this.countryName = name;
        this.countryPopulation = population;
    };
    var viewModel = {        
        availableCountries: ko.observableArray(['France', 'Germany', 'Spain']),
        selectedCountry: ko.observable(),
        Countries: ko.observableArray([
            new Country("UK", 65000000),
            new Country("USA", 320000000),
            new Country("Sweden", 29000000)
        ])
    };
    ko.applyBindings(viewModel);
    viewModel.availableCountries.push('China');
</script>

4858美高梅 34

4858美高梅 35

optionsCaption

有时,默许情况下不想采纳其余option项。可是single-select
drop-down列表由于每一回都要暗中认可选项以连串,怎么防止那些难题呢?常用的方案是加贰个“请选择的”可能“Select
an item”的提醒语,大概别的类似的,然后让这些项作为暗中同意选项。

咱俩选用optionsCaption参数就能很不难完毕,它的值是字符串型,作为默许项展现。例如:

<select data-bind=’options: myOptions, optionsCaption: “Select an
item…”, value: myChosenValue’></select>

KO会在具有选项上助长那叁个项,并且安装value值为undefined。所以,如若myChosenValue被安装为undefined(默许是observable的),那么上述的率先个项就会被入选

Drop-down list体现的任意JavaScript对象,显示text是function的重回值

<select data-bind="options: Countries,
                   optionsText: function(item) { return item.countryName + ' (pop: ' + item.countryPopulation + ')' },
                   value: selectedCountry,
                   optionsCaption: 'Choose...'">    
</select>

4858美高梅 36

optionsText

地点《Drop-down
list体现的任意JavaScript对象,不仅仅是字符串》中显得的绑定
JavaScript对象到option上 –
不仅仅是字符串。那时候你要求设置那一个指标的特别属性作为drop-down列表或multi-select列表的text来体现。设置额外的参数
optionsText将目的的质量名countryName作为展现的文件。

假设不想单独突显对象的属性值作为每种item项的text值,那你能够安装optionsText
为JavaScript
函数,然后再函数里通过投机的逻辑重返相应的值(该函数参数为item项本人)。

4858美高梅 ,optionsValue

和optionsText类似,
你也足以通过额外参数optionsValue来申明对象的拾壹分属性值作为该<option>的value值。

经典场景:如在更新options的时候想保留原来的早已选拔的项。例如,当你再次多次调用Ajax获取car列表的时候,你要力保已经采纳的某部
car一直都以被增选上,那你就要求安装optionsValue为“carId”或许别的的unique标示符,不然的话KO找不知道前面选用的car
是新options里的哪一项

selectedOptions

对此multi-select列表,你能够用selectedOptions读取和装置三个接纳项。技术上看它是3个单身的绑定,有投机的文书档案,请参见:
selectedOptions绑定。

Knockout.Js官网学习(selectedOptions绑定、uniqueName
绑定)

selectedOptions绑定

selectedOptions绑定用于控制multi-select列表已经被挑选的因素,用在使用options绑定的<select>成分上。

当用户在multi-select列表选用或反选1个项的时候,会将view
model的数组举办对应的丰裕要么去除。同样,假若view
model上的这几个数组是observable数组的话,你添加大概去除任何item(通过push恐怕splice)的时候,相应的UI界面里的
option项也会被增选上依然反选。那种办法是2-way绑定。

注:控制single-select下拉菜单选取项,你能够接纳value绑定。

演示代码

4858美高梅 37

<p>    Choose some countries you'd like to visit:    
    <select data-bind="options: availableCountries, selectedOptions: chosenCountries" size="5" multiple="true">   
    </select>
</p>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>  
<script type="text/javascript">    
    var viewModel = {       
        availableCountries: ko.observableArray(['France', 'Germany', 'Spain']),   
        chosenCountries: ko.observableArray(['Germany'])
    };
    ko.applyBindings(viewModel);
    viewModel.chosenCountries.push('France');
</script>

4858美高梅 38

该参数是数组(或observable数组)。KO设置元素的已选拔为和数组里match的项,以前的已采取项将被掩盖。

一经参数是借助监察和控制属性observable数组,那成分的已选取项selected
options项将依据参数值的变通(通过push,pop,或别的observable数组方法)而创新,假设不是,那成分的已摘取项selected
options将只设置3回并且现在不在更新。

无论该参数是还是不是observable数组,用户在multi-select列表里选用照旧反选的时候,KO都会探测到,并且更新数组里的指标以完结协同的结果。那样你就能够收获options已选项。

支撑让用户接纳任意JavaScript对象

在地点的例证里,用户能够挑选数组里的字符串值,可是选拔不压制字符串,要是你愿意你能够证明包涵任意JavaScript对象的数组,查看options绑定怎么展现JavaScript对象到列表里。

那种景观,你能够用selectedOptions来读取或设置这一个指标自笔者,而不是页面上展现的option表示格局,那样做在大多数动静下都万分清晰。view
model就能够探测到你从数组对象里拔取的项了,而无需关切每一个项和页面上突显的option项是怎么样map的。

uniqueName绑定

 uniqueName绑定确定保障所绑定的成分有1个非空的name属性。即便该因素没有name属性,那绑定会给它设置贰个unique的字符串值作为name属性。你不会时常选拔它,唯有在少数特殊的场景下才用到。

  1.在应用KO的时候,一些技能也许借助于有个别因素的name属性,尽快他们尚无怎么意义。例如,jQuery
Validation验证当前只验证有name属性的要素。为协作Knockout
UI使用,有个别时候供给采纳uniqueName绑定幸免让jQuery Validation验证出错。

  2.IE 6下,如若radio
button没有name属性是分裂意被checked了。大多数时候都没难点,因为超越约得其半时候radio
button成分都会有name属性的作为一组相互的group。可是,假若你没证明,KO内部会在这几个因素上行使uniqueName那么以确认保障他们能够被checked。

 例如:

<input data-bind="value: someModelProperty, uniqueName: true"/>

 就好像上边的例证一样,传入true(也许能够转成true的值)以启用uniqueName绑定。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有