4.Knockout.Js(事件绑定)上海时时乐走势图官网

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

KO设置此参数为元素的value值。之前的值将被覆盖。

大多数Web页面与用户之间的交互都发生在表单中,表单中有许多交互式HTML元素如:文本域,按钮,复选框,下拉列表等。从文档对象层次图中可以看到,表单是包含在文档中的,所以要访问表单,仍然需要通过document对象来访问

 所有绑定元素介绍:

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

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>

 动画效果图:

上海时时乐走势图官网 1

 

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>

动画效果图:

上海时时乐走势图官网 2

 

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>

动画效果图:

上海时时乐走势图官网 3

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>

动画效果图:

上海时时乐走势图官网 4

 

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

  本文地址: 

  本文demo地址:

 

 

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

 

该参数是数组(或observable数组)。KO设置元素的已选项为和数组里match的项,之前的已选择项将被覆盖。

单行文本框与多行文本框

单行文本框即type属性设为text的input标签,多行文本框即textarea,它们除了与其它input标签一样具有的value属性处,还具有defaultValue属性表示文本框中的默认文本,即在HTML里所指定的value值的

文本框还有一个方法:select,可以使文本框中的文字呈选中状态。

  本文地址: 

简单示例

表单元素

  本文demo地址:

 

表单元素特性事件

当表单控件失去焦点时会触发blur事件,当控件获得焦点时又会触发focus事件。与之对应,blur方法将使表单控件失去焦点,focus方法将使控件获得焦点,与Form对象的submit方法一样,使用JavaScript执行blur方法与focus方法并不会触发相关事件监听函数

select对象的change事件:当用户选中一个选项,或者取消了对一个选项的选定时,就会发生change事件。

textarea对象的change事件:当用户改变文本区域的值然后通过把键盘焦点移动到其他地方“确认”这些改变的时候,发生change事件。

select事件:当文本框中的文本被选中时发生

 

上海时时乐走势图官网 5

单选按钮与复选框

单选按钮与复选框有个共同的属性——checked,指明该按钮是否被选中。而不同的是,往往多个单选按钮使用同一个name来分到相同的组,且只能有一个被选中,那么,使用这个name访问它时,由于多个按钮使用同一个名字,它会返回一个数组,而当只有一个时(事实不存在单选按钮只有一个单独存在的情况),它又会返回这个元素

    var radios = document.formName.radios;//页面中多个单选按钮name为radios
    alert(radios.length);//返回一个元素列表
    var one = document.formName.one;//只有一个
    alert(one.checked);//只返回这个元素

 

与checked类似的,它们还有个defaultChecked属性,返回是否是在HTML指定默认选中的

如果对上面的select UI元素加上multiple="true"

Form对象

表单就是指的form标签及其里面的内容,要获取一个表单对象,可以给某个form标签加个id属性,然后使用document.getElementById方法获得。也可以使用document.getElementsByTagName("form")来获取所有表单的集合,然后通过下标来访问。还可以给form标签加个name属性,然后可以使用document.getElementsByTagName来访问,注意,同样要使用下标来访问

事实上,0级DOM(0级DOM并不是任何DOM规范,事实上它是BOM的内容,但浏览器都实现的比较好)为我们提供了更简单的访问From对象的方法——使用document.formName

    <form name="formName"></form>
    var fm = document.formName;//可以这样来直接引用该表单对象
    //与document.getElementsByTagName("form")相对应有document.forms集合
    var fm = document.forms[0];//获取第一个Form对象

 

这样,KO就会将事件源对象传递给你的函数并且使用了。

Select对象

表单元素中最复杂的就算是select对象了。select是一复合对象,它包含option标签,也有可能包含optgroup标签。虽然select可以多选,但我们这里只讨论单选的,多选的类似!

    //首先,获取select对象也是通过name(当然ID仍然有效,但name更快捷)
    var select = document.formName.mySel;
    //要获取用户选中了第几项,可以使用它的selectedIndex
    alert(select.selectedIndex);//这个索引号是从0开始的
    //select对象有个options伪数组类型的属性,包含了所有的option,可以使用下标来访问
    alert(select.options[select.selectedIndex].value);//输出选中项的
    alert(select.options[select.selectedIndex].text);//text属性是option包含的文本
    //本来需要知道select里面有多少个option,可以通过options.length
    //但HTML DOM为select对象也提供了length属性
    alert(select.length);//输出和options.length一样

 

获取选中项的值

    var mySel = document.formName.mySel;
    alert(mySel.options[mySel.selectedIndex].value);
    //更快捷的方法
    alert(mySel.value);

 

而向select对象中添加option,本可以使用document.createElement及appendChild等方法的,但HTML DOM为我们提供了更方便的方法了

    var opt = new Option("新增选项文本","选项值");//document.createElement("option");
    var select = document.formName.mySel;
    select.add(opt,select.options[0]);//将opt添加到第一个option的后面
    select.add(opt);//在IE下,没有第二个参数时,会将opt添加到最后
    //上面的代码在FF下会出错,必须使用下面的方法
    select.add(opt,null);//但这在IE会出错
    //下面的方法可以两全了,但长了一点
    select.add(opt,select.options[select.length-1]);
    //删除option的方法remove
    select.remove(1);//remove接收参数为要移除

 

options数组最特殊的一个地方在于它和真正的数组十分相似,可以设置它的length来减少元素,也可以直接将元素赋给某项来修改

    var opts = document.formName.mySel.options;
    opts[0]=new Option("Text","Value");
    opts.length=2;//将移去第三个之后的option
    opts[3]=new Options("ABC",123);//自动添加一个元素

 

Option对象也有defaultSelected属性返回在HTML里指定是否是默认选中项

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

Form对象相关事件及方法

当表单提交时会发生submit事件,我们可以设置事件监听,当用户提交表单时检查表单内容。同时,如果用户输入有误,要阻止表单提交,可以在事件处理函数里return false就行了,当正确时可以调用表单的submit方法提交表单,使用表单的submit方法时不会执行submit事件处理函数

    document.formName.onsubmit = function () {
        //检查表单
        if (result) {
            this.submit();
        } else {
            return false;
        }
    };

 

当表单被重置时会发生reset事件,但这个事件意义不大,因为reset按钮本身意义就不大。同时也有一个reset方法

    document.formName.onreset = function () {
        if (confirm("您真的要重置表单吗?")) {
            this.reset();
        } else {
            return false;
        }
    };

 

上海时时乐走势图官网 6

访问表单元素

Form对象有个elements属性,包是一个含了form标签里面的所有表单控件(input,select等标签,但不包含如div之类的标签)的伪数组

    var fm = document.forms[0];
    alert(fm.elements.length);//length属性报告了元素的个数

 

在之前,访问input这类标签和访问其它标签没什么区别,可以使用ID,也可以使用className,但当它们在表单中时,可以使用它们的nam有来访问

    <form name="formName">
        <input name="textInput" type="text" value="文本框" />
    </form>
    alert(document.formName.textInput.value);

 

上海时时乐走势图官网 7

简单示例

有时候,默认情况下不想选择任何option项。但是single-select drop-down列表由于每次都要默认选择以项目,怎么避免这个问题呢?常用的方案是加一个“请选择的”或者“Select an item”的提示语,或者其它类似的,然后让这个项作为默认选项。

 就像上面的例子一样,传入true(或者可以转成true的值)以启用uniqueName绑定。

上海时时乐走势图官网 8

前言

  2.如果你绑定的non-observable属性是复杂对象,例如复杂的JavaScript 表达式或者子属性,KO也会设置这个值为form表单元素的初始值,但是改变form表单元素的值的时候,KO不会再写会view model属性,这种情况叫one-time-only value setter,不是真正的绑定。

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

注:控制single-select下拉菜单选择项,你可以使用value绑定。

event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数。大部分情况下是用在keypress,mouseover和mouseout上。

你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数,例如: event: { mouseover: someObject.someFunction }。

我们使用optionsCaption参数就能很容易实现,它的值是字符串型,作为默认项显示。例如:

上海时时乐走势图官网 9

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

 例如:

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

someValue: ko.observable("edit me")

 

上海时时乐走势图官网 10

防止事件冒泡

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

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

    如果参数是监控属性observable的,那元素的value值将根据参数值的变化而更新,如果不是,那元素的value值将只设置一次并且以后不在更新。

这样,KO就会调用这个匿名函数,里面会执行viewModel.myFunction(),并且传进了'param1' 和'param2'参数。

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

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

上海时时乐走势图官网 11

 示例代码

对于multi-select列表,你可以用selectedOptions读取和设置多个选择项。技术上看它是一个单独的绑定,有自己的文档,请参考: selectedOptions绑定。

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

上海时时乐走势图官网 12

支持让用户选择任意JavaScript对象

运行后效果为

这个例子里,“Your cellphone number”后的text box 初始情况下是禁用的,只有当用户点击标签 “I have a cellphone”的时候才可用。

Drop-down list

上海时时乐走势图官网 13

和optionsText类似, 你也可以通过额外参数optionsValue来声明对象的那个属性值作为该<option>的value值。

 

Checkbox关联到数组

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

上海时时乐走势图官网 14

submit绑定

在form上,你可以使用click绑定代替submit绑定。不过submit可以handle其它的submit行为,比如在输入框里输入回车的时候可以提交表单。

上海时时乐走势图官网 15

上海时时乐走势图官网 16

简单的UI元素

 如果你用value绑定将你的表单元素和你的observable属性关联起来,KO设置的2-way的双向绑定,任何一方改变都会更新另外一方的值。

当然,最有用的是设置一组radio button元素对应到一个单个的view model 属性。确保一次只能选择一个radio button需要将他们的name属性名都设置成一样的值(例如上个例子的flavorGroup值)。这样的话,一次就只能选择一个了。

enable绑定

 但是,如果你的元素绑定的是一个non-observable属性(例如是一个原始的字符串或者JavaScript表达式) ,KO会这样执行:

            “keypress” – 当用户正在敲一个字符但没有释放键盘的时候就立即更新view model。不像 keyup,这个更新和keydown是一样的。

上海时时乐走势图官网 17

简单的viewModel属性

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

optionsText

这可以说是Multi-select list

上面《Drop-down list展示的任意JavaScript对象,不仅仅是字符串》中展示的绑定 JavaScript对象到option上 – 不仅仅是字符串。这时候你需要设置这个对象的那个属性作为drop-down列表或multi-select列表的text来显示。设置额外的参数 optionsText将对象的属性名countryName作为显示的文本。

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

上海时时乐走势图官网 18

 

上海时时乐走势图官网 19

例如:

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

 有些情况,你可能需要使用事件源对象,Knockout会将这个对象传递到你函数的第一个参数:

上海时时乐走势图官网 20

传参数给你的click 句柄

允许执行默认事件

如果参数是依赖监控属性observable数组,那元素的已选择项selected options项将根据参数值的变化(通过push,pop,或其它observable数组方法)而更新,如果不是,那元素的已选择项selected options将只设置一次并且以后不在更新。

 

disable绑定

<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

任意使用JavaScript表达式

预览效果

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

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

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

该参数是一个数组(或者observable数组)。对每个item,KO都会将它作为一个<option> 添加到<select>里,之前的options都将被删除。

checked绑定是关联到checkable的form表单控件到view model上 - 例如checkbox(<input type='checkbox'>)或者radio button(<input type='radio'>) 。当用户check关联的form表单控件的时候,view model对应的值也会自动更新,相反,如果view model的值改变了,那控件元素的check/uncheck状态也会跟着改变。

默认情况下,Knockout允许click事件继续在更高一层的事件句柄上冒泡执行。例如,如果你的元素和父元素都绑定了click事件,那当你点击该元素的时候两个事件都会触发的。如果需要,你可以通过额外的绑定clickBubble来禁止冒泡。例如:

options绑定控制什么样的options在drop-down列表里(例如:<select>)或者 multi-select 列表里 (例如:<select size='6'>)显示。此绑定不能用于<select>之外的元素。关联的数据应是数组(或者是observable数组),& lt;select>会遍历显示数组里的所有的项。

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

这种场景,你可以用selectedOptions来读取或设置这些对象本身,而不是页面上显示的option表示形式,这样做在大部分情况下都非 常清晰。view model就可以探测到你从数组对象里选择的项了,而不必关注每个项和页面上展示的option项是如何map的。

不管该参数是不是observable数组,用户在multi-select列表里选择或者反选的时候,KO都会探测到,并且更新数组里的对象以达到同步的结果。这样你就可以获取options已选项。

上海时时乐走势图官网 21

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

上海时时乐走势图官网 22

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

如果参数是监控属性observable的,那元素的options项将根据参数值的变化而更新,如果不是,那元素的value值将只设置一次并且以后不在更新。

uniqueName绑定

类似,如果你想创建一个multi-select list,参考selectedOptions绑定。

 uniqueName绑定确保所绑定的元素有一个非空的name属性。如果该元素没有name属性,那绑定会给它设置一个unique的字符串值作为name属性。你不会经常用到它,只有在某些特殊的场景下才用到。

默认情况下,Knockout会阻止冒泡,防止默认的事件继续执行。例如,如果你点击一个a连接,在执行完自定义事件时它不会连接到href地址。这特别有用是因为你的自定义事件主要就是操作你的view model,而不是连接到另外一个页面。

optionsValue

 当你使用submit绑定的时候, Knockout会阻止form表单默认的submit动作。换句话说,浏览器会执行你定义的绑定函数而不会提交这个form表单到服务器上。可以很好地 解释这个,使用  submit绑定就是为了处理view model的自定义函数的,而不是再使用普通的HTML form表单。如果你要继续执行默认的HTML form表单操作,你可以在你的submit句柄里返回true。

默认情况下,myButtonHandler会先执行,然后会冒泡执行myDivHandler。但一旦你设置了clickBubble为false的时候,冒泡事件会被禁止

 对于checkbox,当参数为true的时候,KO会设置元素的状态为checked,反正设置为unchecked。如果你传的参数不是布尔值,那KO将会解析成布尔值。也就是说非0值和非null对象,非空字符串将被解析成true,其它值都被解析成false。

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

submit简单示例

上海时时乐走势图官网 23

  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。

 

            “change”(默认值) - 当失去焦点的时候更新view model的值,或者是<select> 元素被选择的时候。

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

View model上的函数在用的时候有一点点特殊,就是不需要引用对象的,直接引用函数本身就行了,比如直接写incrementClickCounter 就可以了,而无需写成: viewModel.incrementClickCounter(尽管是合法的)。

    如果你提供的参数不是一个数字或者字符串(而是对象或者数组)的话,那显示的value值就是yourParameter.toString() 的内容(通常没用,所以最好都设置为数字或者字符串)。

valueUpdate

运行之后

        上述这些选项,如果你想让你的view model进行实时更新,使用“afterkeydown”是最好的选择。

<div data-bind="click: myDivHandler">
    <button data-bind="click: myButtonHandler, clickBubble: false">
        Click me
    </button>
</div>
<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>

Drop-down list展示的任意JavaScript对象,显示text是function的返回值

上海时时乐走势图官网 24

在上面的例子里,用户可以选择数组里的字符串值,但是选择不限于字符串,如果你愿意你可以声明包含任意JavaScript对象的数组,查看options绑定如何显示JavaScript对象到列表里。

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

就是通过在一个div上绑定两个事件,一个鼠标点上去的mouseover让下面的div内容显示出来,另一个是鼠标移出mouseout让下面的div内容再隐藏。

  1.如果你绑定的non-observable属性是简单对象,例如一个常见的属性值,KO会设置这个值为form表单元素的初始值,如果你改 变form表单元素的值,KO会将值重新写回到view mode的这个属性。但当这个属性自己改变的时候,元素却不会再变化了(因为不是observable的),所以它仅仅是1-way绑定。

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

示例代码

optionsCaption

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

如果参数是一个string数组,那你不需要再声明任何其它参数。<select>元素会将每个string显示为一个option。 不过,如果你让用户选择的是一个JavaScript对象数组(不仅仅是string),那就需要设置optionsText和optionsValue 这两个参数了。

 Knockout对下拉菜单drop-down list绑定有一个特殊的支持,那就是在读取和写入绑定的时候,这个值可以是任意JavaScript对象,而不必非得是字符串。在你让你用户选择一组model对象的时候非常有用。具体例子,参考options绑定。

上海时时乐走势图官网 25  

如果参数是监控属性observable的,那元素的checked状态将根据参数值的变化而更新,如果不是,那元素的value值将只设置一次并且以后不在更新

上海时时乐走势图官网 26

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

简单示例

如果不想仅仅显示对象的属性值作为每个item项的text值,那你可以设置optionsText 为JavaScript 函数,然后再函数里通过自己的逻辑返回相应的值(该函数参数为item项本身)。

上海时时乐走势图官网 27

更新observable和non-observable属性值

如果你需要的话,可以使用匿名函数的第一个参数传进去,然后在里面调用:

简单示例

前言

            “keyup” – 当用户敲完一个字符以后立即更新view model。

经典场景:如在更新options的时候想保留原来的已经选择的项。例如,当你重复多次调用Ajax获取car列表的时候,你要确保已经选择的某个 car一直都是被选择上,那你就需要设置optionsValue为“carId”或者其它的unique标示符,否则的话KO找不知道之前选择的car 是新options里的哪一项

上海时时乐走势图官网 28

上海时时乐走势图官网 29

KO会在所有选项上加上这一个项,并且设置value值为undefined。所以,如果myChosenValue被设置为undefined(默认是observable的),那么上述的第一个项就会被选中

selectedOptions绑定

value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件<input>,<select>和<textarea>上。

上海时时乐走势图官网 30

    不管什么时候,只要你更新了元素的值,那 KO都会将view model对应的属性值自动更新。默认情况下当用户离开焦点(例如onchange事件)的时候,KO才更新这个值,但是你可以通过第2个参数valueUpdate来特别指定改变值的时机。

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

上海时时乐走势图官网 31

前言

注:如果你在checkbox或者radio button上使用checked绑定来读取或者写入元素的 checked状态,而不是value 值的绑定。

访问事件源对象

 代码如下对两个input进行value的属性绑定

如果你的参数是observable的,那绑定会随着observable值的改变而自动更新enabled/disabled状态。如果不是,则只会设置一次并且以后不再更新。

 submit绑定在form表单上添加指定的事件句柄以便该form被提交的时候执行定义的JavaScript 函数。只能用在表单form元素上。

对于radio buttons,KO只有当参数值等于radio button value属性值的时候才设置元素为checked状态。所以参数应是字符串。在上面的例子里只有当view model 的spamFlavor 属性等于“almond”的时候,该radio button才会设置为checked。

<select data-bind='options: myOptions, optionsCaption: "Select an item...", value: myChosenValue'></select>

enable绑定使DOM元素只有在参数值为 true的时候才enabled。在form表单元素input,select,和textarea上非常有用。

 不紧紧限制于变量 – 你可以使用任何JavaScript表达式来控制元素是否可用。例如

disable绑定使DOM元素只有在参数值为 true的时候才disabled。在form表单元素input,select,和textarea上非常有用。

上海时时乐走势图官网 32

 

总共有两个元素一个是录入框,另一个是submit提交按钮

上海时时乐走势图官网 33

注意密码的type为password

你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数,例如: someObject.someFunction。

上海时时乐走势图官网 34

上海时时乐走势图官网 35

View model上的函数在用的时候有一点点特殊,就是不需要引用对象的,直接引用函数本身就行了,比如直接写event: { mouseover: enableDetails } 就可以了,而无需写成: event: { mouseover: viewModel.enableDetails }(尽管是合法的)。

当用户在multi-select列表选择或反选一个项的时候,会将view model的数组进行相应的添加或者删除。同样,如果view model上的这个数组是observable数组的话,你添加或者删除任何item(通过push或者splice)的时候,相应的UI界面里的 option项也会被选择上或者反选。这种方式是2-way绑定。

selectedOptions

 

上海时时乐走势图官网 36

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

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

 

click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button,input和连接a上,但是可以在任意元素上使用。

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

  如果你使用valueUpdate参数,那就是意味着KO将使用自定义的事件而不是默认的离开焦点事件。下面是一些最常用的选项:

当然,如果你想让默认的事件继续执行,你可以在你click的自定义函数里返回true。

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

上海时时乐走势图官网 37

event绑定

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

对于multi-select列表,设置或者获取选择的多项需要使用selectedOptions绑定。对于single-select列表,你也可以使用value绑定读取或者设置元素的selected项。

 最简单的办法是传一个function包装的匿名函数:

添加radio button

enable简单示例

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

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

spamFlavor:ko.observable("cherry")

上海时时乐走势图官网 38

前言

声明DOM元素是否可用enabled。

本文由上海时时乐走势图发布于web前端,转载请注明出处:4.Knockout.Js(事件绑定)上海时时乐走势图官网

您可能还会对下面的文章感兴趣: