Knockout是一個JavaScript庫,它可以幫助您使用干凈的底層數據模型創建豐富、響應迅速的顯示和編輯器用戶界面。每當您的UI部分動態更新時(例如,根據用戶的操作或外部數據源更改而更改),KO都可以幫助您更簡單、更易于維護地實現它。
**主要特色:**
優雅的依賴項跟蹤-每當數據模型更改時,自動更新UI的正確部分。
聲明性綁定—一種簡單而明顯的方式,用于將UI的各個部分連接到數據模型。您可以使用任意嵌套的綁定上下文輕松構建復雜的動態UI。
簡單可擴展-將自定義行為實現為新的聲明性綁定,以便在幾行代碼中輕松重用。
**其他好處:**
純JavaScript庫-適用于任何服務器或客戶端技術
可以添加到現有web應用程序之上,而無需進行重大的體系結構更改
壓縮-壓縮后約13kb
適用于任何主流瀏覽器(IE 6+、Firefox 2+、Chrome、Safari、Edge等)
全面的規范套件(開發的BDD樣式)意味著它的正確功能可以在新的瀏覽器和平臺上輕松驗證
*****
熟悉RubyonRails、ASP.NETMVC或其他MV*技術的開發人員可能會將MVVM視為具有聲明性語法的實時形式的MVC。從另一個意義上講,您可以將KO視為一種制作用于編輯JSON數據的UI的通用方法……
*****
**KO打算與jQuery(或Prototype等)競爭還是與之合作?**
每個人都喜歡jQuery!它是我們過去不得不忍受的笨拙、不一致的DOM API的杰出替代品。jQuery是操縱網頁中的元素和事件處理程序的一種優秀的低級方法。KO解決了一個不同的問題。
一旦您的UI變得非常重要,并且有一些重疊的行為,如果您只使用jQuery,那么維護起來就會變得非常棘手和昂貴。考慮一個例子:您正在顯示一個項目列表,列出該列表中的項目數量,并希望只有在少于5個項目時啟用一個“添加”按鈕。jQuery沒有底層數據模型的概念,因此要獲得項目的數量,必須從表中tr的數量或具有特定CSS類的div的數量中推斷出來。可能項目的數量顯示在某個范圍內,您必須記住在用戶添加項目時更新該范圍的文本。當TR數為5時,您還必須記住禁用“添加”按鈕。稍后,還要求您實現一個“刪除”按鈕,并且您必須確定在單擊該按鈕時要更改哪些DOM元素。
*****
knockout有什么不同?
有了KO就容易多了。它可以讓您在復雜度上進行擴展,而不必擔心引入不一致性。只需將項目表示為JavaScript數組,然后使用foreach綁定將該數組轉換為一個表或一組div。每當陣列更改時,UI都會更改以匹配(您不必知道如何注入新的TR或在何處注入它們)。UI的其余部分保持同步。例如,可以聲明性地綁定范圍以顯示項目數,如下所示:
`There are <span data-bind=``"text: myItems().length"``></span> items`
就這樣!您不必編寫代碼來更新它;當myItems數組更改時,它會自動更新。同樣,要根據項目數啟用或禁用“添加”按鈕,只需編寫:
`<button data-bind="enable: myItems().length < 5">Add</button>
`
稍后,當您被要求實現“刪除”功能時,您不必弄清楚它必須與UI的哪些部分進行交互;您只需讓它改變底層數據模型。
總而言之:KO不能與jQuery或類似的低級DOM API競爭。KO提供了一種將數據模型鏈接到UI的補充性高級方法。KO本身并不依賴于jQuery,但您當然可以同時使用jQuery,而且如果您想要動畫轉換之類的東西,這通常非常有用。
- 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實現搜索日語分詞