# Computed Observables
如果你有一個用于 firstName 的 observable 和另一個用于 lastName 的 observable,并且你想顯示全名怎么辦? 這就是計算 observable 的用武之地——這些函數依賴于一個或多個其他 observable,并且會在這些依賴項中的任何一個發生變化時自動更新。
例如,給定以下視圖模型類,
```
function AppViewModel() {
this.firstName = ko.observable('Bob');
this.lastName = ko.observable('Smith');
}
```
你可以添加一個計算的 observable 來返回全名:
```
function AppViewModel() {
// ... leave firstName and lastName unchanged ...
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
}
```
現在您可以將 UI 元素綁定到它,例如:
`The name is <span data-bind="text: fullName"></span>
`
并且它們將在 firstName 或 lastName 更改時更新(每次其任何依賴項更改時都會調用一次您的評估器函數,并且您返回的任何值都將傳遞給觀察者,例如 UI 元素或其他計算出的可觀察對象)。
*****
一種簡化事物的流行約定
有一個流行的約定可以避免完全跟蹤這一點:如果您的視圖模型的構造函數將對 this 的引用復制到一個不同的變量(傳統上稱為 self)中,那么您就可以在整個視圖模型中使用 self 并且不必擔心它被 重新定義以指代別的東西。 例如:
```
function AppViewModel() {
var self = this;
self.firstName = ko.observable('Bob');
self.lastName = ko.observable('Smith');
self.fullName = ko.computed(function() {
return self.firstName() + " " + self.lastName();
});
}
```
因為 self 在函數的閉包中被捕獲,所以它在任何嵌套函數中保持可用和一致,例如計算 observable 的評估器。 當涉及到事件處理程序時,這個約定更加有用.
### Pure computed observables
如果您的計算 observable 只是根據一些 observable 依賴項計算并返回一個值,那么最好將其聲明為 ko.pureComputed 而不是 ko.computed。 例如:
```
this.fullName = ko.pureComputed(function() {
return this.firstName() + " " + this.lastName();
}, this);
```
由于此計算被聲明為純計算(即,其評估器不直接修改其他對象或狀態),因此 Knockout 可以更有效地管理其重新評估和內存使用。 如果沒有其他代碼對其有主動依賴,Knockout 將自動掛起或釋放它。
*****
強制計算的 observables 總是通知訂閱者
當計算出的 observable 返回一個原始值(數字、字符串、布爾值或 null)時,通常僅在值實際發生變化時才會通知 observable 的依賴項。 但是,可以使用內置的通知擴展器來確保計算的 observable 的訂閱者始終在更新時收到通知,即使值相同。 您可以像這樣應用擴展器:
```
myViewModel.fullName = ko.pureComputed(function() {
return myViewModel.firstName() + " " + myViewModel.lastName();
}).extend({ notify: 'always' });
```
確定一個屬性是否是一個計算出的可觀察對象
在某些情況下,以編程方式確定您是否正在處理計算出的 observable 很有用。 Knockout 提供了一個實用函數 ko.isComputed 來幫助解決這種情況。 例如,您可能希望從發送回服務器的數據中排除計算的 observable。
```
for (var prop in myObject) {
if (myObject.hasOwnProperty(prop) && !ko.isComputed(myObject[prop])) {
result[prop] = myObject[prop];
}
}
```
此外,Knockout 提供了類似的函數,可以對 observables 和計算 observables 進行操作:
ko.isObservable - 為 observables、observable 數組和所有計算的 observables 返回 true。
ko.isWritableObservable - 為 observables、observable 數組和可寫計算 observables(也稱為 ko.isWriteableObservable)返回 true。
當計算出的 observable 僅在您的 UI 中使用時
如果您只需要在 UI 中使用復合全名,您可以將其聲明為:
```
function AppViewModel() {
// ... leave firstName and lastName unchanged ...
this.fullName = function() {
return this.firstName() + " " + this.lastName();
};
}
```
現在你在 UI 元素中的綁定變成了一個方法調用,例如:
`The name is <span data-bind="text: fullName()"></span>
`
Knockout 將在內部創建一個計算的 observable 以檢測表達式所依賴的 observable,并在稍后刪除關聯元素時自動處理它。
- Magento概述
- 第一章:路線圖
- 概述
- 前端技能
- 后端技能
- 第二章:Linux環境
- 1.安裝虛擬機VirtualBox
- 2.創建虛擬機
- 3.安裝Ubuntu系統
- Linux文件系統概述
- Linux常用操作命令
- 第三章:Docker專題
- Docker概述
- 1.基礎
- 2.鏡像
- 3.容器
- 4.容器互聯
- 5.dockerfile
- 6.docker-compose
- 7.docker安裝nginx
- 8.docker安裝mysql
- 9.docker安裝redis
- 10.docker安裝php
- 11.docker配置nginx-php-mysql
- 12.docker-compose構建lamp
- 13.附錄
- 第四章:LAMP環境
- Docker構建LAMP開發環境
- 一鍵安裝LNMP/LAMP
- 第五章:Magento安裝
- Magento環境要求
- Docker安裝Magento
- 填充網站首頁、分類、商品等
- 第六章:Linux開發模式
- 編輯器vscode及插件
- 開發模式之SSH
- 開發模式之SFTP
- 開發模式之git
- 第七章:Magento架構
- 架構概述
- 文件目錄結構
- 數據庫表解析之EAV
- Magento命令行
- 第八章:模塊結構解析
- 模塊目錄結構
- 配置文件之env.php
- 配置文件-routes.xml
- 配置文件之module.xml
- 配置文件之webapi.xml
- 配置的方式及加載順序
- mvc之controller
- mvc之model
- mvc之block
- mvc之模板
- api概述
- 第九章:自定義模塊
- 自定義模塊概述
- 建立模塊
- 注冊模塊
- 創建控制器
- 創建Block
- 創建模板
- Model-Collection-ResourceModel
- 添加后臺菜單
- 第十章:重寫(Override)
- 重寫概述
- 布局文件詳解
- 定位布局文件
- 重寫Controller
- 重寫Template
- 重寫Block
- 重寫Model
- 重寫其它類
- 第十一章:小部件(Widget)
- 1.Widget概述
- 2.Widget在CMS頁面的應用
- 3.自定義一個Widget
- 4.Widget添加到前臺頁面
- 第十二章:主題(Theme)
- 主題概述
- 1.創建新的主題
- 2.添加全局css文件
- 3.模板分離到主題
- 4.主題模板與javascript
- 5.magento封裝的js寫法
- 6.layout布局解析
- 7.創建移動端主題
- 第十三章:Template專題
- 模板的指定
- 自定義模板
- 模板重寫的規則
- 第十四章:Javascript專題
- magento中的javascript
- requirejs語法
- js的調用和初始化
- js的重寫和擴展
- javascript使用mixins
- 第十五章:Knockoutjs專題
- knockoutjs的應用
- knockout簡介
- Observables
- Observable Arrays
- Computed Observables
- Bindings(綁定)
- Visible和hidden綁定
- Text綁定
- html綁定
- class和css綁定
- style綁定
- attr綁定
- 表單-click綁定
- 表單-submit綁定
- 表單-value值綁定
- 表單-textInput綁定
- 表單-checked綁定
- 表單-options綁定
- data-bind語法
- binding上下文
- 第十六章:Checkout專題
- 結算頁面概述
- 添加新的結帳步驟
- 添加自定義支付方式
- 結算前添加自定義驗證
- 添加自定義配送方式
- 添加自定義配送驗證
- 為郵政編碼添加掩碼
- 為字段添加自定義模板
- 結賬頁面添加新的input
- 在地址表單中添加字段
- 添加自定義配送地址
- 結算頁面其它字段修改
- 自定義運輸方式列表
- 線下支付方式添加字段
- 第十七章:實戰案例解析
- 從零開發一個模塊
- 1.需求分析
- 2.數據表與數據填充
- 3.建立module
- 4.路由
- 5.控制器
- 6.創建Block
- 7.創建布局
- 8.建立模板
- 9.建立Model層
- 10.查詢數據
- 11.完善模板
- 12.小結
- 定制我的訂單頁面
- 1.需求分析
- 2.新建模塊
- 3.重寫:布局文件
- 4.Block文件
- 5.模板文件
- 6.添加css文件
- 7.測試定制結果
- 添加系統配置模塊
- 1.需求分析
- 2.后臺實現
- 3.前臺實現
- 第三方登錄到magento
- 1.需求分析
- 2.登錄頁表單
- 3.建立module
- 4.建立控制器-后端登錄邏輯
- 5.建立控制器-登錄中間頁
- 6.建立中間頁的layout文件
- 7.建立block文件
- 8.建立登錄中間頁模板
- 9.第三方登錄擴展
- 保留心愿單商品
- 1.需求分析
- 2.Plugin機制-攔截器
- 3.心愿單修改示例
- 創建訂單流程及擴展
- 1.需求分析
- 2.創建訂單流程追蹤
- 3.重寫
- 用戶注冊添加字段
- 1-需求分析
- 2-功能實現
- 第十八章:RestApi專題
- webapi概述
- 如何訪問一個api
- swagger介紹
- 將services配置為webapi
- 配置api示例
- 設置自定義路由
- 第十九章:設計模式專題
- 設計模式概述
- 創建型模式
- 工廠方法
- 抽象工廠
- 生成器
- 原型
- 單例
- 結構型模式
- 適配器
- 橋接
- 組合
- 裝飾
- 外觀
- 享元
- 代理
- 行為模式
- 責任鏈
- 命令
- 迭代器
- 中介者
- 備忘錄
- 觀察者
- 狀態
- 策略
- 模板方法
- 訪問者
- 第二十章:性能最佳實踐
- 本章概述
- 硬件推薦
- 軟件推薦
- 架構參考
- 開發環境建議
- 配置最佳實踐
- 部署流程
- 高級設置
- 附錄1:常用代碼及問題整理
- 權限報錯問題
- Magento定時任務
- Magento開發基礎篇一
- Magento開發基礎篇二
- Magento之CRUD
- Magento中獲取各種url的方法
- Redis存儲Session和緩存
- 發送郵件配置
- 檢測用戶登錄信息
- 獲取env.php中配置的變量
- 模板中獲取當前頁面url
- 獲取用戶默認配送地址
- Magento系統問題整理
- 結算頁面不能選擇賬單地址
- 我應該執行什么命令?
- 追代碼打印sql
- 忘記后臺密碼怎么辦?
- 附錄2:多語言應用
- 多語言概述
- 日語翻譯引擎
- 附錄3:插件安裝與GMO
- 安裝插件的方法
- GMO支付插件
- 附錄4:Elasticsearch搜索和分詞
- ElasticSearcch配置與安裝
- ES實現搜索日語分詞