前言

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

简言之示例

jQuery 1

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

jQuery 2

预览效果

jQuery 3  

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

您能够申明任何JavaScript函数 – 不自然非假设view
model里的函数。你能够证明任意对象上的其余函数,例如:
someObject.someFunction。

View
model上的函数在用的时候有一丢丢独特,就是不须求引用对象的,直接引用函数本人就行了,比如直接写incrementClickCounter
就足以了,而无需写成: viewModel.incrementClickCounter(固然是官方的)。

传参数给您的click 句柄

 最简便的主意是传三个function包装的匿名函数:

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

诸如此类,KO就会调用这么些匿名函数,里面会履行viewModel.myFunction(),并且传进了’param1′
和’param贰’参数。

做客事件源对象

 有个别景况,你大概需求接纳事件源对象,Knockout会将这么些指标传递到你函数的率先个参数:

jQuery 4

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

jQuery 5

要是您要求的话,能够使用匿名函数的率先个参数字传送进去,然后在里面调用:

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

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

允许实施私下认可事件

暗许景况下,Knockout会阻止冒泡,幸免私下认可的风波继续执行。例如,倘若你点击三个a连接,在实践完自定义事件时它不会连接受href地址。这尤其有用是因为您的自定义事件主要正是操作你的view
model,而不是连接受此外三个页面。

当然,固然你想让暗中认可的风云继续执行,你能够在您click的自定义函数里重回true。

幸免事件冒泡

暗中认可情状下,Knockout允许click事件后续在更加高一层的事件句柄上冒泡执行。例如,借使你的要素和父成分都绑定了click事件,那当您点击该因素的时候八个事件都会接触的。若是供给,你能够经过额外的绑定clickBubble来禁止冒泡。例如:

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

私下认可情形下,myButtonHandler会先实施,然后会冒泡执行myDivHandler。但假使你设置了clickBubble为false的时候,冒泡事件会被取缔

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

event绑定

event绑定在DOM成分上助长钦赐的风浪句柄以便元素被触发的时候实施定义的JavaScript
函数。超越2/四状态下是用在keypress,mouseover和mouseout上。

不难易行示例

 

jQuery 6

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

jQuery 7

尽管经过在2个div上绑定七个事件,3个鼠标点上去的mouseover让上面包车型大巴div内容呈现出来,另一个是鼠标移出mouseout让上边包车型地铁div内容再隐蔽。

您能够声明任何JavaScript函数 – 不自然非倘诺view
model里的函数。你能够表明任意对象上的任何函数,例如: event: {
mouseover: someObject.someFunction }。

View
model上的函数在用的时候有一小点非正规,就是不要求引用对象的,直接引用函数自身就行了,比如直接写event:
{ mouseover: enableDetails } 就能够了,而无需写成: event: { mouseover:
viewModel.enableDetails }(就算是合法的)。

submit绑定

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

 

 当您选择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属性

jQuery 8

总括有多少个成分一个是录入框,另1个是submit提交按钮

在form上,你能够行使click绑定代替submit绑定。可是submit可以handle别的的submit行为,比如在输入框里输入回车的时候能够交到表单。

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

enable绑定

enable绑定使DOM元素只有在参数值为
true的时候才enabled。在form表单成分input,select,和textarea上特别实惠。

enable简单示例

 

jQuery 9

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

jQuery 10

本条例子里,“Your cellphone number”后的text box
起先情况下是剥夺的,唯有当用户点击标签 “I have a
cellphone”的时候才可用。

jQuery 11

宣示DOM成分是或不是可用enabled。

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

如若你的参数是observable的,那绑定会随着observable值的更改而自动更新enabled/disabled状态。如若不是,则只会安装一次并且将来不再更新。

自由使用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的属性绑定

jQuery 12

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

jQuery 13

运营后效果为

jQuery 14

留意密码的type为password

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

   
倘若参数是监察和控制属性observable的,那成分的value值将依照参数值的生成而立异,借使不是,那成分的value值将只设置三次并且今后不在更新。

   
假若你提供的参数不是贰个数字照旧字符串(而是对象恐怕数组)的话,那展现的value值就是yourParameter.toString()
的内容(经常没用,所以最棒都安装为数字也许字符串)。

    不管如几时候,只要您更新了成分的值,那 KO都会将view
model对应的属性值自动更新。暗中同意意况下当用户距离主旨(例如onchange事件)的时候,KO才更新这一个值,可是你能够因此第叁个参数valueUpdate来专门内定改变值的火候。

valueUpdate

  借使你使用valueUpdate参数,那正是意味着KO将利用自定义的风云而不是暗中同意的离开核心事件。上边是局地最常用的选项:

            “change”(暗许值) – 当失去主题的时候更新view
model的值,或然是<select> 成分被增选的时候。

            “keyup” – 当用户敲完1个字符未来登时更新view model。

            “keypress” –
当用户正在敲3个字符但未有自由键盘的时候就当下更新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")

jQuery 15

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

 Knockout对下拉菜单drop-down
list绑定有一个分裂经常的帮衬,那正是在读取和写入绑定的时候,那些值能够是任意JavaScript对象,而毋庸非得是字符串。在你让你用户选拔一组model对象的时候尤其有效。具体育赛事例,参考options绑定。

类似,倘使你想创制1个multi-select list,参考selectedOptions绑定。

更新observable和non-observable属性值

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

 但是,借使您的要素绑定的是几个non-observable属性(例如是多少个原本的字符串恐怕JavaScript表明式)
,KO会那样举行:

  1.1旦你绑定的non-observable属性是归纳对象,例如1个广阔的属性值,KO会设置那个值为form表单成分的发端值,假如您改
变form表单成分的值,KO会将值重新写回到view
mode的那性子子。但当这几个性情本身改变的时候,成分却不会再转移了(因为不是observable的),所以它可是是一-way绑定。

  贰.假如你绑定的non-observable属性是扑朔迷离对象,例如复杂的JavaScript
表明式只怕子属性,KO也会安装那些值为form表单成分的起来值,但是改变form表单元素的值的时候,KO不会再写会view
model属性,那种地方叫one-time-only value setter,不是实在的绑定。

例如:

jQuery 16

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

jQuery 17

 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绑定。

差不多示例

 示例代码

jQuery 18

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

jQuery 19

运行之后

jQuery 20

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

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

Checkbox关联到数组

jQuery 21

<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

jQuery 22

jQuery 23

jQuery,添加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")

jQuery 24

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

本来,最管用的是设置一组radio button元素对应到四个单个的view model
属性。确认保障二回只可以选取2个radio
button须求将他们的name属性名都设置成一样的值(例如上个例子的flavorGroup值)。那样的话,三回就只可以选取1个了。

一经参数是监督属性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

 

jQuery 25

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

jQuery 26

jQuery 27

 

该参数是三个数组(恐怕observable数组)。对各种item,KO都会将它看做二个<option>
添加到<select>里,之前的options都将被删去。

1旦参数是二个string数组,那你不需求再声称任何别的参数。<select>元素会将每种string显示为多少个option。
然而,借使你让用户接纳的是三个JavaScript对象数组(不仅仅是string),那就供给安装optionsText和optionsValue
那五个参数了。

即使参数是监督属性observable的,那元素的options项将遵照参数值的浮动而立异,要是还是不是,那成分的value值将只设置一回并且今后不在更新。

 

比方对下面的select UI元素加上multiple=”true”

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

jQuery 28

那能够说是Multi-select list

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

 

jQuery 29

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

jQuery 30

jQuery 31

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>

jQuery 32

optionsText

地方《Drop-down
list体现的任意JavaScript对象,不仅仅是字符串》中呈现的绑定
JavaScript对象到option上 –
不仅仅是字符串。那时候你必要安装这几个指标的越发属性作为drop-down列表或multi-select列表的text来显示。设置额外的参数
optionsText将对象的属性名countryName作为展现的文件。

设若不想单独显示对象的属性值作为每一种item项的text值,那你能够设置optionsText
为JavaScript
函数,然后再函数里通过友好的逻辑再次回到相应的值(该函数参数为item项自己)。

optionsValue

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

经文场景:如在更新options的时候想保留原来的早已选取的项。例如,当你重新数次调用Ajax获取car列表的时候,你要力保已经采取的某部
car一直都以被选拔上,这你就须要设置optionsValue为“carId”或许其它的unique标示符,不然的话KO找不明了前边选拔的car
是新options里的哪1项

selectedOptions

对此multi-select列表,你可以用selectedOptions读取和安装八个选拔项。技术上看它是一个单独的绑定,有投机的文书档案,请参见:
selectedOptions绑定。

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

selectedOptions绑定

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

当用户在multi-select列表选用或反选贰个项的时候,会将view
model的数组实行对应的增加大概去除。同样,倘使view
model上的那几个数组是observable数组的话,你添加也许去除任何item(通过push也许splice)的时候,相应的UI界面里的
option项也会被采用上依然反选。那种方法是2-way绑定。

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

以身作则代码

jQuery 33

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

jQuery 34

该参数是数组(或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绑定确认保障所绑定的成分有3个非空的name属性。就算该因素未有name属性,那绑定会给它设置三个unique的字符串值作为name属性。你不会不时使用它,只有在一些特殊的场景下才用到。

  一.在动用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"/>

 就像下边包车型大巴例证1样,传入true(恐怕能够转成true的值)以启用uniqueName绑定。

 

相关文章

网站地图xml地图