Knockout入门

@liushaozhen 2016-07-02 09:03:41发表于 iuap-design/blog knockout

#1.Knockout如何使用

1. 引入Konckout文件

<script src="http://design.yyuap.com/static/knockout/knockout-3.2.0.debug.js"></script>

2. 在js中定义一个view model并绑定

<script type='text/JavaScript'>
    //定义viewModel
    var viewModel={
        name:'lsz',
        age:'23'
    };
    //开始绑定
    ko.applyBindings(viewModel);
</script>

3. 在knockout中,每个HTML的DOM对象都是通过data-bind属性来绑定数据的。

例如:

<p data-bind="text:name"></p>
<p data-bind="text:age"></p>

说明:ko.applyBindings()两个参数,第一个参数是用于绑定的对象。第二个参数(可选),可以指定使用knockout的DOM元素或者容器。例如 ko.applyBindings(viewModel,document,getElementById('div'))。它现在的功能是只有对id为div的元素和子元素生效
#2.knockout的DOM元素上的属性说明

2.1 text绑定

text绑定到DOM元素上,使得该元素的文本值为你绑定的参数值。
例如:

<span data-bind="text:name"></span>
<script type="text/javascript">
  var viewModel={
     name:'lsz'
  }
  ko.applyBindings(viewModel);
</script>

说明:knockout将参数值设置在指定DOM元素的innerText(IE)或textContent(Firefox)属性上。原来的文本将会被覆盖

2.2 value绑定

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

<p data-bind="text:name"></p>
<input data-bind="value: name"/>
<script type="text/javascript">
    var viewModel={
       name:ko.observable('lsz')
    };
    ko.applyBindings(viewModel);
</script>

说明:以上代码的效果是的,当input的值发生变化的时候,会给viewModel的name属性重新赋值,并在p标签中显示

2.3 visible绑定

visible绑定到DOM元素上,使得该元素的hidden和visible状态取决于绑定的值
例如:

<div data-bind="visible:shouldShowMessage">
    当visible的值为true的时候,你才可以看到这句话
</div>
<script type="text/javascript">
  var viewModel={
        shouldShowMessage:true 
    };
    ko.applyBindings(viewModel);
</script>

说明:当visible的值为真的时候,元素的display为css设置的样式。 当visible的值为假的时候,元素的display为none,它的优先级高于css定义的任何display的样式

2.4 html绑定

html绑定到DOM元素上,使得该元素的HTML值为你绑定的参数值
例如:

<div data-bind="html:content">
    <p>原来的html结构</p>
</div>
<script type="text/javascript">
    var viewModel={
        content:'<h1>标题一</h1>'
    };
    ko.applyBindings(viewModel);
</script>

说明:knockout将参数值设置到指定DOM元素的innerHTML属性上,元素原来的内容将会被覆盖

2.5 css绑定

css绑定是添加或删除一个或多个class类名到指定DOM元素上
例如:

<style type="text/css">
    .bg{
        background: red;
    }
</style>
<div data-bind="css:{bg:flag}">
    <p>css绑定</p>
</div>
<script type="text/javascript">
    var viewModel={
        flag:true
    };
    ko.applyBindings(viewModel);
</script>

说明:以上代码的效果是当flag为true的时候,将bg这个类添加到指定DOM元素上。当flag为false的时候,将bg这个类从指定DOM元素上移除

2.6 style绑定

style是添加或删除一个或多个DOM元素上的style值
例如:

<div data-bind="style:{background:flag?'red':'blue',color:flag?'blue':'red'}" >
    <p>内容</p>
</div>
<script type="text/javascript">
    var viewModel={
        flag:true
    };
    ko.applyBindings(viewModel);
</script>

说明:以上代码的效果是当flag为true的时候,DOM元素为红背景蓝字体。当flag为flase的时候,DOM元素为蓝背景红字体

2.7 attr绑定

attr绑定提供了一种可以设置DOM元素的任何属性的值,例如可以设置a标签的title属性,href属性,自定义属性等等

<a data-bind="attr:{href:url,title:alt,self:self}">百度</a>
<script type="text/javascript">
    var viewModel={
       url:'https://www.baidu.com/',
       alt:'百度一下',
       self:'自定义属性值'
    };
    ko.applyBindings(viewModel);
</script>

说明:以上代码的效果是给a动态绑定了href和title属性已经自定义属性self的值

2.8 checked绑定

checked绑定可以用于checkbox和redio设置的绑定
例如:

<input type="checkbox" data-bind="checked: checkboxFlag"/>
<input type="radio" data-bind="checked: radioFlag" value="radioValue"/>
<script type="text/javascript">
    var viewModel={
        checkboxFlag: true,
        radioFlag:'radioValue'
    };
    ko.applyBindings(viewModel);
</script>

说明:以上代码的效果是,当checkboxFlag为true的时候,对应的checkbox被选中。当radioFlag的值等于radio的value的值的时候,对应的元素被选中

2.9 click绑定

click绑定在DOM元素上,给元素添加点击事件

<button data-bind="click: clickFn">Click</button>
<script type="text/javascript">
    var viewModel = {
        clickFn: function () {
           alert();
        }
    };
    ko.applyBindings(viewModel);
</script>

说明:以上代码的效果是,当点击按钮的时候执行函数

2.10 event绑定

event绑定在DOM元素上,给元素添加指定的事件

<div data-bind="event: { mouseover: overFn, mouseout: outFn }">
    Mouse 
</div>
<script type="text/javascript">
    var viewModel = {
        overFn: function () {
            alert('over');
        },
        outFn:function(){
            alert('out');
        }
    };
    ko.applyBindings(viewModel);
</script>

说明:以上代码的效果是,当鼠标划入或划出的时候执行对应的函数

2.11 submit绑定

submit绑定在form表单上添加指定的事件,以使该form被提交的时候执行指定的函数

<form data-bind="submit: sub">
    ... form contents ...
    <button type="submit">submit</button>
</form>
<script type="text/javascript">
    var viewModel={
        sub: function (formElement) {
            console.log(formElement);
        }
    };
    ko.applyBindings(viewModel);
</script>

说明:submit只能用在form表单上,当你使用submit绑定的时候, knockout会阻止form表单默认的submit动作。sub执行的时候,knockout会将整个form表单元素传递到sub函数中

2.12 options绑定

options绑定控制下拉列表的内容,只能用于select元素

<select data-bind="options: options"></select>
<script type="text/javascript">
    var viewModel = {
        options: ['France', 'Germany', 'Spain']
    };
    ko.applyBindings(viewModel);
</script>

说明:options给select标签增加了options元素,options默认会被展开
#3.Knockout的数据绑定

3.1. 单向绑定

<p>姓名:<span data-bind="text:name"></span></p> 
<p>年龄:<span data-bind="text:age"></span></p>
<script type="text/javascript">
 var viewModel= {
      name:'lsz';
      age:'23';
  }
  ko.applyBindings(viewModel);
</script>

3.2. 双向绑定

<p>姓名:<span data-bind="text:name"></span></p>
<p>年龄:<span data-bind="text:age"></span></p>
<p>姓名:<input type="text" data-bind="value:name"></p>
<p>年龄:<input type="text" data-bind="value:age"></p>
<script type="text/javascript">
  var viewModel={
        name:ko.observable('lsz'),
        age:ko.observable('23')
    };
    ko.applyBindings(viewModel)
</script>

说明:上述代码中,利用ko.observable()实现对属性的监控,当input的值发生改变的时候,span的值也会发生改变

3.3. 依赖绑定

<p>姓名:<span data-bind="text:name"></span></p>
<p>年龄:<span data-bind="text:age"></span></p>
<p>姓名:<input type="text" data-bind="value:name"></p>
<p>年龄:<input type="text" data-bind="value:age"></p>
<p>姓名年龄:<span data-bind="text:nameAge"></span></p>
<script type="text/javascript">
  var viewModel={
        name:ko.observable('lsz'),
        age:ko.observable('23')
    };
    viewModel.nameAge=ko.computed(function () {
        return this.name()+this.age();
    },viewModel);
    ko.applyBindings(viewModel);
</script>

说明:ko.computed()用来依赖一个或多个监控属性,并且当其中任何一个依赖对象被改变的时候将会自动更新。

未完待续