KnockOut.js入门示例详解

最新推荐文章于 2024-07-16 10:33:59 发布

heoo442

最新推荐文章于 2024-07-16 10:33:59 发布

阅读量665

点赞数

分类专栏：网站与服务文章标签： knockout jquery

本文链接：https://blog.csdn.net/heoo442/article/details/41247767

版权

网站与服务专栏收录该内容

8 篇文章 0 订阅

订阅专栏

KnockOut框架简称KO,是微软将应用于WPF/Silverlight的MVVM模式在Web上的尝试，这是一个非常有用的JavaScript框架。
KO的核心就是绑定，包括数据绑定和行为绑定；
KO的数据绑定包括单向和双向绑定；
KO的行为绑定，即是将某个函数注册到某个元素的某个事件上。

示例如下:

<html>
<head>
    <title>双向绑定测试</title>
    <script src="../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="../Scripts/knockout-2.1.0.debug.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <div>
            <label>
                省:</label><input data-bind="value:province" /></div>
        <div>
            <label>
                市:</label><input data-bind="value:city" /></div>
        <div>
            <label>
                区:</label><input data-bind="value:district" /></div>
        <div>
            <label>
                街道:</label><input data-bind="value:street" /></div>
        <div>
            <label>
                地址:</label><input data-bind="value:address" style="width: 80%" /></div>
        <div>
            <input type="button" data-bind="click:format" value="确定" /></div>
    </div>
    <script type="text/javascript">
        function AddressModel() {
            var self = this;
            self.province = ko.observable("江苏省");
            self.city = ko.observable("苏州市");
            self.district = ko.observable("工业园区");
            self.street = ko.observable("星湖街328号");
            self.address = ko.observable();

            self.format = function () {
                if (self.province() && self.city() && self.district() && self.street()) {
                    var address = self.province() + " "
                                + self.city() + " "
                                + self.district() + " "
                                + self.street();
                    self.address(address);
                }
                else {
                    alert("请提供完整的地址信息");
                }
            };
            self.format();
        }
        ko.applyBindings(new AddressModel());
    </script>
</body>
</html>

如上面的代码片段所示，我们定义了一个名为AddressModel的函数作为整个"地址编辑"页面的ViewModel , AddressModel 的五个数据成员 Cprovince 、 city 、 district 、 street 和address)表示地址的四个组成部分和格式化的地址，它们都是基于双向绑定的Observable类型成员，意味着用户的输入能够即时改变绑定的数据源，而数据源的改变也能即时地反映在绑定的 HTML元素上。
Observable数据成员是一个通过调用 ko.observable方法创建的函数，方法调用指定的参数表示更新的数据。
AddressModel的另一个成员format是一个自定义的函数，该函数进行地址格式化并用格式化的地址更新address字段。由于address字段是一个Observable成员，一旦它的值发生改变，被绑定的HTML元素的值将会自动更新。
AddressModel的六个字段分别绑定在六个HTML元素上，其中province、city、district和street宇段绑定到代表对应文本框的的Value属性上(data-bind="value: {成员名称}" )，而address字段则绑定到用于显示格式化地址的<span>元素的Text属性上(data-bind="text:{成员名称}" )，用于格式化地址的 format 字段则与"确定"按钮的 click 事件进行绑定(data-bind="click: {成员名称}")。
真正的绑定工作发生在 ko.applyBindings 方法被调用的时候。

heoo442

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
KnockOut.js入门示例详解

KnockOut框架简称KO,2.KO是微软将应用于WPF/Silverlight的MVVM模式在Web上的尝试，这是一个非常有用的JavaScript框架。3.KO的核心就是绑定，包括数据绑定和行为绑定；KO的数据绑定包括单向和双向绑定；KO的行为绑定，即是将某个函数注册到某个元素的某个事件上。4.
复制链接

扫一扫

专栏目录