基础知识-属性方法的绑定

view model

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

ko.applyBindings()有两个参数：

第一个参数是用于绑定的对象。
第二个参数（可选），可以指定使用knockout的DOM元素或者容器。

ko.applyBindings(viewModel,document,getElementById('div')),目前只有对id为div的元素和子元素生效。

data-bind

HTML的DOM对象通过data-bind属性来绑定数据

text绑定
text使得该元素的文本值为绑定的参数值

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

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

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

<p data-bind="text:name"></p>
<input data-bind="value: name"/>
// js
  var viewModel={
       name:ko.observable('lsz')
    };
    ko.applyBindings(viewModel);
效果： 当input的值发生变化的时候，会给viewModel的name属性重新赋值，并在p标签中显示

)

visible绑定
使该元素的hidden和visible状态取决于绑定的值

<div data-bind="visible:shouldShowMessage">
    当visible的值为true的时候，你才可以看到这句话
</div>

// js
var viewModel={
        shouldShowMessage:true 
    };

优先级高于css定义的任何display的样式

click绑定
给元素添加点击事件

<button data-bind="click: clickFn">Click</button>
// js 
 var viewModel = {
        clickFn: function () {
           alert('click');
        }
    };

event绑定
给元素添加指定的事件

<div data-bind="event: { mouseover: overFn, mouseout: outFn }">
    Mouse 
</div>
// js 
  var viewModel = {
        overFn: function () {
            alert('over');
        },
        outFn:function(){
            alert('out');
        }
    };

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

<form data-bind="submit: sub">
    ... form contents ...
    <button type="submit">submit</button>
</form>
// js 
 var viewModel={
        sub: function (formElement) {
            console.log(formElement); // 执行时，会将整个form表单元素传递到sub函数中
        }
    };

只能用在form表单上，当使用submit绑定的时候， knockout会阻止form表单默认的submit动作。

html绑定
使该元素的HTML值为你绑定的参数值

<div data-bind="html:content">
    <p>原来的html结构</p>
</div>

// js 
  var viewModel={
        content:'<h1>标题一</h1>'
    };

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

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

<style type="text/css">
    .bg{
        background: red;
    }
</style>
<div data-bind="css:{bg:flag}">
    <p>css绑定</p>
</div>

// js
    var viewModel={
        flag:true
    };
效果：当flag为true的时候，将bg这个类添加到指定DOM元素上。当flag为false的时候，将bg这个类从指定DOM元素上移除

style绑定
style是添加或删除一个或多个DOM元素上的style值

<div data-bind="style:{background:flag?'red':'blue',color:flag?'blue':'red'}" >
    <p>内容</p>
</div>

attr绑定
设置DOM元素的任何属性的值

<a data-bind="attr:{href:url,title:alt,self:self}">百度</a>
// js
 var viewModel={
       url:'https://www.baidu.com/',
       alt:'百度一下',
       self:'自定义属性值'
    };
效果:给a动态绑定了href和title属性已经自定义属性self的值

checked绑定
用于checkbox和radio设置的绑定

<input type="checkbox" data-bind="checked: checkboxFlag"/>
<input type="radio" data-bind="checked: radioFlag" value="radioValue"/>
// js
   var viewModel={
        checkboxFlag: true,
        radioFlag:'radioValue'
    };
效果:当checkboxFlag为true的时候，对应的checkbox被选中。当radioFlag的值等于radio的value的值的时候，对应的元素被选中

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

<select data-bind="options: options"></select>
// js
  var viewModel = {
        options: ['France', 'Germany', 'Spain']
    };

options给select标签增加了options元素，options默认会被展开

单向绑定

<p>姓名：<span data-bind="text:name"></span></p> 
// js 
var viewModel= {
      name:'lsz';
  }

双向绑定

<p>姓名：<span data-bind="text:name"></span></p> 
<p>姓名：<input type="text" data-bind="value:name"></p>
// js 
  var viewModel={
        name:ko.observable('lsz'),
    };

利用ko.observable()实现对属性的监控，当input的值发生改变的时候，span的值也会发生改变

依赖绑定

<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>
// js
  var viewModel={
        name:ko.observable('lsz'),
        age:ko.observable('23')
    };
    viewModel.nameAge=ko.computed(function () {
        return this.name()+this.age();
    },viewModel);