Knockout.js之初印象

最近在学Knockout.js，想要把看到的东西用blog记录下来。

Knockout.js是一个MVVM的框架，突然想起之前有人问我哪些是MVVM框架？我回答了angular.js和bootstrap(糗)，现在看了些博客，书，粗略的了解了MVVM是什么？

MVVM即Model，ViewModel,View

Model:数据模型

View：视图/UI

ViewModel：用于视图和模型的之间的数据传递。

我了解的MVVM是指大部分数据的处理用js完成，后台返回Model，通过ViewModel将数据绑定到UI。同时也可以在ViewModel中进行大部分的数据处理。有修改仅需修改ViewModel，非常方便。

Knockoutjs有监控，追踪的功能，即可以双向绑定数据。（之前的开发过程中有遇到页面没有刷新，也没有重新获取修改后数据导致后台拿到的还是修改之前的数据，这个bug找了蛮久，我觉得可以用knockoutjs双向绑定来解决）

双向绑定带来了一个好处，即不论是UI改变，还是后台传过来的Model有所变化，knockoutjs都能感知得到，这就是ko.observable()，ko.observabkeArray(),ko.computed()的功劳了。

下面看一段简单的程序：我要在页面上显示姓名，并且可以姓名可以随着我改变姓或者名而变化

<html>
<head>
    <title>Kong's Website</title>
    <script src="~/Scripts/knockout-3.5.1.js"></script>
    <script src="~/Scripts/jquery-3.3.1.js"></script>
</head>
<body>
    <p>firstName:<input type="text" data-bind="value:firstName" /></p>
    <p>lastName:<input type="text" data-bind="value:lastName" /></p>
    <p>firstName:<strong data-bind="text:firstName"></strong></p> 
    <p>lastName:<strong data-bind="text:lastName"></strong> </p>
</body>
</html>

@section scripts{
    <script>
        function viewModel() {
            var self = this;
            self.firstName = ko.observable("Cherry");
            self.lastName = ko.observable("Li");
        }
        var viewModel = new viewModel();
        ko.applyBindings(viewModel);
    </script>
}

我要显示全名即姓+名，只需要添加在lastName后面添加

    <p>fullName:<strong data-bind="text:fullName"></strong></p>

在viewModel中添加

  self.fullName = ko.computed(function () {
                return self.firstName() + " " + self.lastName();
            });

比如我要在页面显示一个table

<html>
<head>
    <title>Kong's Website</title>
    <script src="~/Scripts/knockout-3.5.1.js"></script>
    <script src="~/Scripts/jquery-3.3.1.js"></script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody data-bind="foreach:Person">
            <tr>
                <td data-bind="text:name"></td>
                <td data-bind="text:type"></td>
            </tr>
        </tbody>
    </table>
</body>
</html>


@section scripts{
    <script>
        function viewModel() {
            var self = this;
            self.Person = ko.observableArray([
                { name: "Bungle", type: "Bear" },
                { name: "George", type: "Hippo" },
                { name: "Zippy", type: "Unknown" }
            ]);  
        }
        var viewModel = new viewModel();
        ko.applyBindings(viewModel);
    </script>
}

原文地址：https://www.cnblogs.com/xiaoxinstart/p/12051680.html