实例讲解：Observable

最新推荐文章于 2020-11-02 10:21:41 发布

明外

最新推荐文章于 2020-11-02 10:21:41 发布

阅读量1.9k

点赞数

分类专栏： knockoutjs 文章标签： Observable knockoutjs Observabl

本文链接：https://blog.csdn.net/xmroom/article/details/22352849

版权

knockoutjs 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

基础概念二：Observable与computed

纵观KO的所有应用场景，基本上这2个属性至少会用到一个。个人认为这是KO最常使用的东西。他们用法如下：

Observable(监控属性)：监控自身属性的变化，向外部发送通知。外部通过subscribe方法来订阅属性的变化事件。
Computed(依赖属性)：在早期版本中叫做dependentObservable,它通常依赖于其他的Observable,通过计算得出自己的数据。当依赖项改变的时候，computed属性会接到通知，然后同步更新自身

实例讲解：Observable

基本语法

1、定义

var myViewModel = {
    personName: ko.observable('Bob'),//定义叫做personName的监控属性
    personAge: ko.observable(123)//定义叫做personAge的监控属性
};

4、订阅属性修改事件
   
   
    
    myViewModel.personName.subscribe(function(newValue) {
    alert("The person's new name is " + newValue);
});

html源码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../Scripts/knockout-3.0.0.js"></script>
    <script src="../Scripts/jquery-1.5.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var listMode = function () {
                self = this;
                self.firstName = ko.observable("5");
                self.lastName = ko.observable("cihai");
                self.fullName = ko.computed(function () {
                    return self.firstName() + self.lastName();
                }, this);
                self.firstName.subscribe(function (newValue) {
                    alert(newValue);

                });
            }

            ko.applyBindings(new listMode());
        });
    </script>
</head>
<body>

   <strong>firstName</strong><input data-bind="value: firstName" /><br />
       <strong>lastName</strong><input data-bind="value: lastName" /><br />
    <strong>fullName</strong><input data-bind="value: fullName" /><br />
          直接显示<br />
    <button type="button" οnclick="show();">显示</button>
</body>
</html>

明外

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实例讲解：Observable

基础概念二：Observable与computed纵观KO的所有应用场景，基本上这2个属性至少会用到一个。个人认为这是KO最常使用的东西。他们用法如下：Observable(监控属性)：监控自身属性的变化，向外部发送通知。外部通过subscribe方法来订阅属性的变化事件。Computed(依赖属性)：在早期版本中叫做dependentObservable,它通常依赖于其他的Obser
复制链接

扫一扫

专栏目录