前言

click绑定在DOM元素上助长事件句柄以便元素于点击的时刻实施定义的JavaScript
函数。大部分凡是为此当button,input和连接a上,但是可在任意元素上行使。

简短示例

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

图片 2

预览效果

图片 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′
和’param2’参数。

走访事件源对象

 有若干情况,你或许得动用事件源对象,Knockout会将此目标传递到你函数的首先只参数:

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

图片 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
函数。大部分状况下是用在keypress,mouseover及mouseout上。

简而言之示例

 

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

图片 7

就通过在一个div上绑定两只事件,一个鼠标点上去的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属性

图片 8

合计发生些许单因素一个凡录入框,另一个凡submit提交按钮

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

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

enable绑定

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

enable简单示例

 

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

图片 10

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

图片 11

宣示DOM元素是否可用enabled。

非布尔值会给分析成布尔值。例如0和null被解析成false,21和非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的性绑定

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

图片 13

运转后效果呢

图片 14

留意密码的type为password

KO设置这个参数为要素的value值。之前的价将吃蒙。

   
如果参数是监督属性observable的,那元素的value值将依据参数值的转变而创新,如果无是,那元素的value值将只有设置同样不成又以后不在创新。

   
如果您提供的参数不是一个数字要字符串(而是对象要数组)的话,那亮的value值就是yourParameter.toString()
的情(通常没有因此,所以最好好且安装为数字或者字符串)。

    不管啊时,只要你更新了元素的价,那 KO都见面用view
model对应的属于性值自动更新。默认情况下当用户距离焦点(例如onchange事件)的时段,KO才更新是价值,但是你可通过第2只参数valueUpdate来专门指定改变价值的空子。

valueUpdate

  如果你使用valueUpdate参数,那即便是意味KO将以自定义的波而非是默认的离焦点事件。下面是有最为常用的挑项:

            “change”(默认值) – 当去焦点之时节更新view
model的价,或者是<select> 元素被挑的早晚。

            “keyup” – 当用户敲了一个字符以后这更新view model。

            “keypress” –
当用户正在敲一个字符但没有自由键盘的时段便立更新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")

图片 15

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

 Knockout对下拉菜单drop-down
list绑定有一个特的支持,那便是以读取和写入绑定的时光,这个价值好是任意JavaScript对象,而不必非得是字符串。在你让你用户挑选同一组model对象的时段挺有效。具体事例,参考options绑定。

类,如果您想创造一个multi-select list,参考selectedOptions绑定。

更新observable和non-observable属性值

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

 但是,如果您的元素绑定的凡一个non-observable属性(例如是一个原来之字符串或者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,不是真的的绑定。

例如:

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

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

简而言之示例

 示例代码

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

图片 19

运行后

图片 20

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

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

Checkbox关联到数组

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

图片 22

图片 23

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

图片 24

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

 

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

图片 26

图片 27

 

欠参数是一个数组(或者observable数组)。对每个item,KO都见面以它当作一个<option>
添加到<select>里,之前的options都拿吃去除。

要是参数是一个string数组,那尔无待重声明任何其它参数。<select>元素会以每个string显示也一个option。
不过,如果您于用户挑选的凡一个JavaScript对象数组(不仅仅是string),那即便需装optionsText和optionsValue
这有限只参数了。

苟参数是监控属性observable的,那元素的options项用依据参数值的浮动而创新,如果无是,那元素的value值将只有设置同一糟而以后不在更新。

 

只要对地方的select UI元素加上multiple=”true”

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

图片 28

随即足以说凡是Multi-select list

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

 

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

图片 30

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

图片 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里的呀一样桩

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

演示代码

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

图片 34

欠参数是数组(或observable数组)。KO设置元素的就选择也和数组里match的起,之前的既选项用受掩盖。

万一参数是凭监控属性observable数组,那元素的曾选项selected
options项将因参数值的变更(通过push,pop,或其他observable数组方法)而创新,如果非是,那元素的已经选项selected
options将只设置同样不行又以后不以创新。

任由该参数是勿是observable数组,用户以multi-select列表里摘要反选的下,KO都见面探测到,并且更新数组里之目标为达成协同的结果。这样你就是可以获options已摘项。

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

每当上面的事例里,用户可挑选数组里之字符串值,但是选择未压制字符串,如果您肯你可以声明包含任意JavaScript对象的往往组,查看options绑定什么样显示JavaScript对象及列表里。

这种场面,你可以就此selectedOptions来读取或安装这些目标自我,而休是页面及显示的option表示形式,这样做在大多数状态下都未
常清晰。view
model就得探测到公从数组对象里选择的起了,而无需关注每个件和页面上显示的option项是什么样map的。

uniqueName绑定

 uniqueName绑定确保所绑定的元素来一个非空的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地图