KonckOut知识要点总结

1、环境配置

1、激活

ko.applyBindings(myViewModel);

将这个代码放到文档底部，或者放在顶部包含在DOM处理完成诸如JQuery的$函数方法中

ko.applyBindings(myViewModel, document.getElementById(‘someElementId’))

它限制了只有ID为someElementId的元素才能激活使用KO功能

2、数据绑定

1、单个属性

将你的model属性声明成observable,能够通知用户它的改变以及自动检测依赖关系

var myViewModel = {
personName: ko.observable('Bob'),
personAge: ko.observable(123)
};

1、读取当前监控的属性值，只需要直接调用observable（不需要参数），在这个例子当中，调用myViewModel.personName()将会返回’Bob’，调用myViewModel.personAge() 将会返回’123’

2、写一个新值到监控属性上，调用observable方法，将要写的值作为一个参数传入即可。例如，调用myViewModel.personName(‘Mary’) 将会把名称改变成 ‘Mary’。

3、一次性改变Model对象监控的多个属性值，你可以使用链式方法。例如：myViewModel.personName(‘Mary’).personAge(50) 将会把名称改变成’Mary’将年龄设置为 50.

2、数组

1、声明与初始化

var myObservableArray = ko.observableArray(); 
myObservableArray.push('Some value');myObservableArray.push('Some value'); 

2、访问数组数据

alert('The length of the array is ' + myObservableArray().length); 
alert('The first element is ' + myObservableArray()[0]); 

3、一些新增的方法

observableArray 增加了一些更有用的方法，而且是Js数组没有的

myObservableArray.remove(someItem)移除myObservableArray数组内所有匹配someItem的对象， 并把这些对象组成一个数组返回

myObservableArray.remove(function(item) { return item.age < 18 })移除myObservableArray数组内所有年龄属性小于18的对象，并返回这些对象组成的新数组

myObservableArray.removeAll(['Chad', 132, undefined])移除myObservableArray数组内所有匹配'Chad',123, orundefined 的对象并把它们组成新数组返回

myObservableArray.removeAll()移除myObservableArray数组内所有数据，并返回这些数据组成的一个新数组

3、计算属性

1、声明计算属性

function AppViewModel(){
 this.firstName=ko.observable('Bob');
 this.lastName=ko.observable('Smith');
}

//添加计算属性
function AppViewModel(){
this.fullName=ko.computed(function(){
   return this.firstName()+" "+this.lastName();
 },this);}

2、计算属性的写

function MyViewModel() {
    this.firstName = ko.observable('Planet');
    this.lastName = ko.observable('Earth');
    this.fullName = ko.computed({
        read: function () { },
        write: function (value) {
            varlastSpacePos = value.lastIndexOf(" ");
            if (lastSpacePos > 0) {
                // Ignore values with no space character
                this.firstName(value.substring(0, lastSpacePos));
                // Update "firstName"
                this.lastName(value.substring(lastSpacePos + 1));
                // Update "lastName"
            }
        }, owner: this
    });
}
ko.applyBindings(new MyViewModel());

3、计算属性的依赖

peek方法可以帮助你在不需要创建依赖的情况下去控制一个监控属性或者依赖属性。

ko.computed(function () {
        varparams = {
            page: this.pageIndex(),
            selected: this.selectedItem.peek()
        };
        $.getJSON('/Some/Json/Service', params, this.currentPageData);
    }, this);

4、绑定模式

1、单向双向绑定

如果值是通过ko.observable定义的说明是双向绑定，否则为One-Time绑定，在knockout不存在单向绑定。

2、Visible绑定

Visible绑定通过绑定一个值来确定DOM元素显示或隐藏

<div data-bind="visible: shouldShowMessage"> 
 You will see this message only when "shouldShowMessage" holds a true value.
</div>

3、text绑定

Text绑定主要是让DOM元素显示参数值。

Today's message is: <span data-bind="text: myMessage"></span>

The item is<span data-bind="text: price() >50 ? 'expensive' : 'affordable'"></span>today.

4、html绑定

html绑定到DOM元素上，使得该元素显示的HTML值为你绑定的参数。

5、css类名绑定

css绑定是添加或删除一个或多个CSS class到DOM元素上。

<div data-bind="css: { profitWarning: currentProfit() < 0 }"> 
  Profit Information
</div> 

<script type="text/javascript">
var viewModel = {
        currentProfit: ko.observable(150000)
        // Positive value, so initially we don't apply the "profitWarning" class    
};    
viewModel.currentProfit(-50);    
// Causes the "profitWarning" class to be applied
</script>

6、style属性绑定

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

<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">   
Profit Information
</div>
<script type="text/javascript">
var viewModel = {
        currentProfit: ko.observable(150000)
 // Positive value, so initially black 
   };
    viewModel.currentProfit(-50); 
// Causes the DIV's contents to go red</script>

//一次设置多个值
<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black', fontWeight: isSevere() ? 'bold' : '' }"> ... </div>

如果你需要应用font-weight或者text-decoration，你不能直接使用，而是要使用style对应的JavaScript名称。

错误：{ font-weight: someValue }; 正确：{ fontWeight: someValue }

错误：{ text-decoration: someValue }; 正确：{ textDecoration: someValue }

7、attr属性绑定

这个绑定可以用于给DOM元素添加自定义属性，或绑定到已有的属性：

<a data-bind="attr: { href: url, title: details }">
    Report
</a>

//不合法
<div data-bind="attr: { data-something: someValue }">...</div>

//合法
<div data-bind="attr: { ‘data-something’: someValue }">...</div>

8、forEach

 <tbody data-bind="foreach: people"> 
         <tr> 
             <td data-bind="text: firstName"></td> 
             <td data-bind="text: lastName"></td> 
         </tr> 
     </tbody> 

1、如果我们想要输出数组中的所有元素而不是像例一中使用firstName去指定元素的话，我们可以使用$data来进行输出。

 <ul data-bind="foreach: months"> 
     <li> 
         The current item is: <b data-bind="text: $data"></b> 
     </li> 
 </ul> 

2、当然，我们也可以使用$data来调用数组中具体的元素，比如我们要使用$data调用例1中的firstName的话，我们可以使用$data.firstName来输出firstName。

3、我们曾在例2中使用了$index来表示我们数组的下标，$index是Knockoutjs为我们提供的属性，我们可以直接引用，它会随着数组等下标的变化动态变化的，比如如果数组的长度减少了1，$index的值也会跟着减少的。

//使用$parent来使用foreach元素之外的属性
<h1 data-bind="text: blogPostTitle"></h1> 
<ul data-bind="foreach: likes"> 
    <li> 
        <b data-bind="text: name"></b> likes the blog post <b data-bind="text: $parent.blogPostTitle"></b> 
    </li> 
</ul>

4、$data来代替数组中的元素，同时我们也可以使用as来为我们要遍历的元素起一个别名

 <ul data-bind="foreach: { data: categories, as: 'category' }"> 
     <li> 
         <ul data-bind="foreach: { data: items, as: 'item' }"> 
             <li> 
                 <span data-bind="text: category.name"></span>: 
                 <span data-bind="text: item"></span> 
             </li> 
         </ul> 
     </li> 
 </ul> 

5、没有一个可以绑定foreach的元素，此时我们可以通过以下的代码来实现

我们使用 来表示循环的开始和结束，这是一个虚拟的标签，Knockoutjs能够对其中的foreach进行绑定就好像你将foreach绑定到了一个真实的标签上一样。

<script type="text/javascript" src="knockout-2.2.0.js"></script>
 
 <ul> 
     <li class="header">Header item</li> 
     <!-- ko foreach: myItems --> 
         <li>Item <span data-bind="text: $data"></span></li> 
     <!-- /ko --> 
 </ul> 
   
 <script type="text/javascript">
     ko.applyBindings({
         myItems: ['A', 'B', 'C']
     }); 
 </script>

6、默认不显示被标示为删除的元素

有的时候我们要跳过数组中的一些元素，此时这些元素已经被标示为删除，但并没有被真实删除，这些元素当我们使用foreach输出的时候是默认不显示的，如果我们想要这些元素显示的话，我们可以使用includeDestroyed这个选项

<div data-bind='foreach: { data: myArray, includeDestroyed: true }'> 
    ... 
</div>

7、我们可以使用with binding来重新定义一个上下文绑定

这样我们在使用coords下的latitude和longitude的时候我们就不需要使用coords.latitude来调用了，因为我们使用with:coords来指定了coords的上下文，当我们使用coords下面的属性时就可以直接使用了。

 <h1 data-bind="text: city"> </h1> 
 <p data-bind="with: coords"> 
     Latitude: <span data-bind="text: latitude"> </span>, 
     Longitude: <span data-bind="text: longitude"> </span> 
 </p> 
   
 <script type="text/javascript">
     ko.applyBindings({
         city: "London",
         coords: {
             latitude: 51.5001524,
             longitude: -0.1262362
         }
     }); 
 </script>

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

<button data-bind="click: incrementClickCounter">
        Click me
    </button>
</div>
<script type="text/javascript">
    var viewModel = {
        numberOfClicks: ko.observable(0),
        incrementClickCounter: function() {
            var previousCount = this.numberOfClicks();
            this.numberOfClicks(previousCount + 1);
        }
    };

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

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

2、传参数给你的click 句柄

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

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

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

4、阻止事件冒泡

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

9、event绑定

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

<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">
    var viewModel = {
        detailsEnabled: ko.observable(false),
        enableDetails: function() {
            this.detailsEnabled(true);
        },
        disableDetails: function() {
            this.detailsEnabled(false);
        }
    };
</script>

可以是任意函数

你需要传入的是一个JavaScript对象，他的属性名是事件名称，值是你所需要执行的函数。

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

传参数给你的click 句柄

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

9、submit绑定

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

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

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

10、value绑定

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

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

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

“change”（默认值） - 当失去焦点的时候更新view model的值，或者是 元素被选择的时候。

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

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

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

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