培森的Blog MVVM声明式绑定【编写中】

MVVM声明式绑定【编写中】

Knockoutjs的绑定系统为提供了非常强大且简洁的方式将数据和UI连接起来,可以非常方便的使用这个绑定语法…

Knockoutjs的绑定系统为提供了非常强大且简洁的方式将数据和UI连接起来,可以非常方便的使用这个绑定语法来进行数据的展示。

绑定语法:

<span   data-bind="text: myMessage"></span>

<!-- ko text:   myMessage --><!-- /ko -->

 

【1】

一个绑定语法由两部分组成:绑定的名字和值,他们之间使用“:”进行隔开。

myMessage在viewModel中声明。

观察者变量(Observable),是实现自动更新的方式。通过将viewModel和页面元素绑定的某个变量定义为cube.obj或cube.array,则当viewModel中该变量的值改变,页面对应的元素将自动更新。

示例:

View中:

<div data-bind="text: content"></div>

<button data-bind="click:setContent">修改值</button>

 

ViewModel中:

define([], function() {

    var   PageViewModel = function(params) {

        var self = this;

        self.content   = cube.obj("要显示的内容");

 

self.setContent =   function(){

            self.content("修改后的内容");

        }

    };

    return   PageViewModel;

});

当动态修改self.content的值时,view中的显示文本将自动更新。比如通过View中的一个按钮修改self.content的值。

注意:观察者变量赋值时通过调用变量方法进行,比如:self.content("修改后的内容");如果使用等号赋值,该观察者变量将会中断观察,比如:self.content = "修改后的内容";或者self.content = cube.obj("修改后的内容");

获取变量值通过变量方法:比如:var contentValue = self.content();

观察者变量可以作为参数传递传递到其他ViewModel中,当该变量值在其中一个ViewModel中被修改时,那该观察者变量的值将都会被修改。

当变量定义为cube.array时,比如:self.content = cube.array([“河北”,”北京”,”天津”]);则会监控数组元素的变化,包括数组元素的新增、删除、排序。

观察者数组常用的方法如下:

(1)、self.content.push('Some new value'):增加一个新的元素。

(2)、self.content.pop():删除一个元素,并返回其值。

(3)、self.content.unshift('Some new value'):在数组的开始处增加一个新的元素。

(4)、self.content.shift():删除数组的第一个元素,并返回其值。

(5)、self.content.reverse():反转数组的顺序。

(6)、self.content.remove(someItem) 移除self.content数组内所有匹配someItem的对象, 并把这些对象组成一个数组返回。

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

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

(9)、self.content.removeAll() 移除self.content数组内所有数据,并返回这些数据组成的一个新数组。




【2】

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

示例:

View中:

<div data-bind="visible: shouldShowMessage">这里的内容根据shouldShowMessage的值决定是否显示。</div>

<button data-bind="click:setShouldShowMessage">修改值</button>

ViewModel中:

define([], function() {

    var   PageViewModel = function(params) {

        var self = this;

        self.shouldShowMessage   = cube.obj(true);

        self.setShouldShowMessage   = function(){

            if(self.shouldShowMessage()){

                self.shouldShowMessage(false);

            }else{

                self.shouldShowMessage(true);

            }

        }

    };

    return   PageViewModel;

});

2)        text绑定主要是让DOM元素显示参数值。

参看章节1.1.2.2

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

text的区别为text显示为文本内容,html可以作为HTML标记进行渲染。

4)        css绑定是添加或删除一个或多个CSS classDOM元素上。

示例:

View中:

<div data-bind="css:   { hide: isHide }">

   内容

</div>

ViewModel中:

define([], function() {

    var   PageViewModel = function(params) {

        var self = this;

        self.isHide = cube.obj(true);

    };

    return   PageViewModel;

});

 

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

示例:

View中:

<div data-bind="style:   { width: width }">

   内容

</div>

ViewModel中:

define([], function() {

    var   PageViewModel = function(params) {

        var self = this;

        self.width = cube.obj("100px");

    };

    return   PageViewModel;

});

 

6)        attr 绑定提供了一种方式可以设置DOM元素的任何属性值。

示例:

View中:

<img data-bind="attr:   { href: route}" />

ViewModel中:

define([], function() {

    var   PageViewModel = function(params) {

        var self = this;

        self.route = cube.obj("#main");

    };

    return   PageViewModel;

});

 

本文来自网络,不代表培森的Blog立场,转载请注明出处:https://blog.xupeisen.com/archives/45

作者: 培森

联系我们

联系我们

13262951234

在线咨询: QQ交谈

邮箱: admin@xupeisen.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部