Knockoutjs实战开发:属性监控(Observables)和依赖跟踪(Dependency tracking )

前端之家收集整理的这篇文章主要介绍了Knockoutjs实战开发:属性监控(Observables)和依赖跟踪(Dependency tracking )前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在Knockoutjs中提供了属性监控(Observables)和依赖跟踪(Dependency tracking)这两个概念,通过它们可以对我们所关心的控件(比如:text文本框)实现动态监控,这样,当空间的值改变或者出现对应的事件是,Knockoutjs可以对其最初相应的反应(此反应不需要刷新页面),从而得到我们想要的结果。

下面我们来看一个比较经典的例子:一个人的名字由“姓”和“名”组成,由用户输入一个姓名,中间由空格隔开,然后通过span动态显示用户的姓和名。代码如下

<script type="text/javascript" src="knockout-2.2.0.js"></script>

<p>First name: <span data-bind="text: firstName"></span></p> 
<p>Last name: <span data-bind="text: lastName"></span></p> 
<h2>Hello,<input data-bind="value: fullName"/>!</h2>
  
<script type="text/javascript">
    function Myviewmodel() {
        this.firstName = ko.observable('张');
        this.lastName = ko.observable('三');

        this.fullName = ko.computed({
            read: function () {
                return this.firstName() + " " + this.lastName();
            },write: function (value) {
                var lastSpacePos = value.lastIndexOf(" ");
                if (lastSpacePos > 0) {  
                    this.firstName(value.substring(0,lastSpacePos));
                    this.lastName(value.substring(lastSpacePos + 1)); 
                }
            },owner: this
        });
    }

    ko.applyBindings(new Myviewmodel());
</script>


在讲解以上的代码之前,我们首先来了解一下MVVM(Model-View-View Model)的概念

一、MVVM(Model-View-View Model)

MVVM是一种用户界面的设计模式,它将精巧、复杂的设计算法隐藏在用户界面的背后,从而使我们可以更加方便的使用它。它分为以下的三个部分:

(1)、Model层:此类似于MVC中的Model层,用来保存我们应用程序的数据。在使用Knockoutjs时,我们通常是使用Ajax来向服务端付出请求来读写Model层的数据的。

(2)、View Model层:此层是建立在UI上面的纯粹的数据操作。它是和我们的HTML代码分离开来的JavaScript对象,但并不代表持久化对象,它只是对用户正在操作的且没有进行保存的数据,此设计可以保持View Model的纯洁性,从而能更好的处理复杂的数据操作。

(3)、View层:此层是用户可以看到的,它用来显示从View Model层传递过来的数据、发出请求命令(比如用户点击了某个Button)、当View Model的值改变时作出相应的更新等。在使用Knockoutjs时,此层仅仅代表HTML页面或者是服务端通过模版生成的HTML页面

在了解完MVVM的概念后,我们就可以着手分析以上的代码了:

二、首先定义viewmodel

 function Myviewmodel(){}

在此viewmodel中又定义了三个属性

 this.firstName = ko.observable('张');  this.lastName = ko.observable('三'); 
 this.fullName = ko.computed({});

我们先来看前两个属性,即:firstName和lastName,这两个属性都是使用ko.observable()来定义的,使用此方法来定义就是告诉Knockoutjs属性firstName和lastName需要进行属性监控,这样当firstName和lastName的值改变时,就会触动对应的View层的组件做出相应的改变,这样才会实现当用户输入完fullName之后,firstName和lastName做出相应的改变。

三、Computed Observables(组合监控属性)

我们在定义第三个fullName属性时使用的是:ko.computed()方法,此方法代表将多个监控属性组合到一起(在这里我们将firstName和lastName进行组合形成了fullName),当组合属性中的任何一个监控属性的值改变时,组合属性的值也会做出相应的改变


this.fullName = ko.computed({
            read: function () {
                return this.firstName() + " " + this.lastName();
            },owner: this
        });

在此例中,我们使用了组合属性的三个参数:read、write和owner。其中,

(1)、read是必须的,表示返回此组合属性的值。

(2)、write是可选的,如果我们使用此属性,则代表此组合属性是可写的,当从View层传入一个value值,则我们可以根据自己的需要对值进行处理。这里我需要将value根据空格拆分,然后分别赋值给firstName和lastName。
(3)、owner可选,一般值为this。


四、激活属性监控


1 ko.applyBindings(new Myviewmodel());

这里我们使用ko.applyBindings()对我们定义的Myviewmodel进行激活,这样我们在进行绑定时就可以看到各个属性的值,如果没有进行激活的话,则不会显示对应属性的值,这点我们要注意了。



五、绑定属性到View层


1 <p>First name: <span data-bind="text: firstName"></span></p> 
2 <p>Last name: <span data-bind="text: lastName"></span></p> 
3 <h2>Hello,<input data-bind="value: fullName"/>!</h2>

这里使用data-bind分别对firstName、lastName和fullName进行了绑定,这样我们就可以看到各个属性的值了。

六、为什么使用组合属性(Computed Observables)

在使用组合属性(Computed Observables)时,我们可以对我们想要处理的属性或者验证做出相应的措施,比如:

(1)、值的转换

我们可以通过以下的代码将对应的输入表示为对应的金额输出页面
<script type="text/javascript" src="knockout-2.2.0.js"></script>

<p>Enter bid price: <input data-bind="value: formattedPrice"/></p>
  
<script type="text/javascript">
    function Myviewmodel() {
        this.price = ko.observable(25.99);

        this.formattedPrice = ko.computed({
            read: function () {
                return '¥' + this.price().toFixed(2);
            },write: function (value) {
                value = parseFloat(value.replace(/[^\.\d]/g,""));
                this.price(isNaN(value) ? 0 : value);  
            },owner: this
        });
    }

    ko.applyBindings(new Myviewmodel());
</script>

(2)、用户输入验证,只允许输入数字

<script type="text/javascript" src="knockout-2.2.0.js"></script>

<p>Enter a numeric value: <input data-bind="value: attemptedValue"/></p> 
<div data-bind="visible: !lastInputWasValid()">That's not a number!</div>
  
<script type="text/javascript">
    function Myviewmodel() {
        this.acceptedNumericValue = ko.observable(123);
        this.lastInputWasValid = ko.observable(true);

        this.attemptedValue = ko.computed({
            read: this.acceptedNumericValue,write: function (value) {
                if (isNaN(value))
                    this.lastInputWasValid(false);
                else {
                    this.lastInputWasValid(true);
                    this.acceptedNumericValue(value); 
                }
            },owner: this
        });
    }

    ko.applyBindings(new Myviewmodel());
</script>
原文链接:https://www.f2er.com/javaschema/285026.html

猜你在找的设计模式相关文章