Knockout.js

knockout.js是什么？

knockout.js是一个js库，它拥有MVVM模型，可以实现页面的自动更新，以及对页面数据的实时监听。也就是说如果你需要去改变页面，那么只需要去更改页面所依赖的数据就行，对数据进行操作就可以达到改变页面的目的，而不需要亲自去操作DOM，简便而又快捷。

<div>
    <input data-bind="value: name" type="text" placeholder="请输入您的姓名">
    <p data-bind="text: name"></p>
</div>

var viewModel = {
    name: ko.observable("ccc")   
};
ko.applyBindings(viewModel);

上述代码表明了，通过data-bind绑定的name字段，当页面发生修改时，name也会发生变化。下面p标签的内容随着上面input输入的内容改变而改变，那么说明name这个字段是具有响应式的。

applyBinding && Observables

ko调用applyBinding激活viewModel，把viewModel与view层中的data-bind所绑定的字段所绑定起来。
ko调用observable方法能够得到一个函数，把这个函数给在view绑定的字段，可供view显示，在js中如果需要更改它则需要调用observable返回的函数，并且把要改的值作为参数传进去。

var viewModel = {
    name: ko.observable("ccc")
};
const handleBtn = () => {
    viewModel.name("name");
}

computed 、visible && click绑定

计算属性通常用于一个结果依赖其他的observable字段。
visible用来控制标签的可见性，值为boolean
click用户绑定点击事件，需要注意的是无法像以前一样使用onclick绑定点击事件

<button data-bind="click: handleChange" id="btn">修改</button>
<div data-bind="visible: shouldShowMessage">
    <p>You will see this message only when "shouldShowMessage" holds a true value.</p>
</div>
<div>
    <p>first Name: <span data-bind="text: firstName"></span></p>
    <p>last Name: <span data-bind="text: lastName"></span></p>
    <p>full Name: <span data-bind="text: fullName"></span></p>

</div>

// 响应数据源，供applyBindings激活
var viewModel = {
    shouldShowMessage: ko.observable(false), // Message initially visible
    firstName: ko.observable('孙'),
    lastName: ko.observable('悟空'),
    fullName: ko.observable('')  
};
ko.applyBindings(viewModel);
// 调用ko的computed使用viewModel中的observable属性来计算出fullName
const getFullName = ko.computed(function () {
            return this.firstName() + ' ' + this.lastName();
}, viewModel);
function handleChange() {
     // 通过button的点击来改变标签的可见性
     viewModel.shouldShowMessage(viewModel.shouldShowMessage() ? false : true);
     viewModel.fullName(getFullName());
 }

结果：

foreach绑定

foreach用于循环遍历数组，之后进行渲染

<table style="border: 1px solid black; padding: 0px; border-collapse: collapse;"> 
    <thead> 
        <tr><th>First name</th><th>Last name</th></tr> 
    </thead> 
    <tbody data-bind="foreach: people" > 
        <tr> 
            <td data-bind="text: firstName"></td> 
            <td data-bind="text: lastName"></td> 
        </tr> 
    </tbody> 
</table>

td, th {
    border: 1px solid black;
    margin: 0px;
    padding: 0;
    border-spacing: 0px;
}

ko.applyBindings({
            people: [
                { firstName: 'Bert', lastName: 'Bertington' },
                { firstName: 'Charles', lastName: 'Charlesforth' },
                { firstName: 'Denise', lastName: 'Dentiste' }
            ]
 });

如果数组的每一项元素是基本数据类型，那么可以使用data-bind=“text: $data”

fruits: ["apples", "banana", "orange", "starwberry"]

<ul data-bind="foreach: fruits">
   <li data-bind="text: $data"></li>
</ul>

如上图所示可以兼容不同的数据类型

event绑定

给标签元素绑定事件，通常用于keypress、mouse等

    <div data-bind="event: {mouseover: handleOver, mouseout: handleOut}">详情</div>
    <div data-bind="if: isEnable">鼠标进入</div>

ko.applyBindings({
    isEnable: ko.observable(false),
    handleOver: function() {
        this.isEnable(true);
    },
    handleOut: function() {
        this.isEnable(false);
    }
})

这里的事件响应函数可以是任何的函数，可以是在applyBindings中也可以是在外面，或者直接把函数写在标签中也是可以的。

value绑定

value的值是view和viewModel绑定的值，主要用户input、textarea、select等标签上。

<div>
    <p>First name: <strong data-bind="text: firstName"></strong></p>
    <p>Last name: <strong data-bind="text: lastName"></strong></p>
    <button data-bind="click: handleChange, text: textValue()">修改</button>
    <br>
    <br>
    <div data-bind="visible: isEdit">
        First name: <input placeholder="请输入你要修改的值" data-bind="value: firstName" /><br><br>
        Last name: <input placeholder="请输入你要修改的值" data-bind="value: lastName" />
    </div>
</div>

 function viewModel(firstName, lastName, changeStatus) {
     this.firstName = ko.observable(firstName);
     this.lastName = ko.observable(lastName);
     this.isEdit = ko.observable(false);
     this.textValue = ko.observable(changeStatus);
 }
 const vm = new viewModel('Bert', "ccc", "修改")
 ko.applyBindings(vm)

 function handleChange() {
     vm.isEdit(vm.isEdit() ? false : true);
     vm.textValue(vm.isEdit() ? "隐藏" : "修改");
     console.log(vm.isEdit(), vm.textValue());
 }

结果：

if绑定

if绑定可以动态的控制某个组件动态的显示，if绑定会修改DOM结构所以需要频繁切换DOM的话，建议使用visible绑定

submit绑定

用户处理form表单上的默认事件，可以是点击事件也可以是键盘事件。

with绑定

标签中的上下文绑定

<div data-bind="with: acticle">
    <p>title: <span data-bind="text: title"></span></p>
    <p>message: <span data-bind="text: message"></span></p>
</div>

var article = {
  	title: '人文科学',
   	message: 'the humanities'
}
var article1 = {
   title: '复制品',
}
var viewModel = {
   acticle: ko.observable(article),
   article1: ko.observable(article1)
};
ko.applyBindings(viewModel);

结果：上述盒子中上下文是article，因此所展示的title和message是article中的。