KnockoutJs 簡介

此內容基本上是原始資料的翻譯。目的是了解 Magento 2 的 KnockoutJs 並用葡萄牙語創建有關 KnockouJs 的內容。

文件

• 微軟：MVVM
• KnockoutJs：簡介
• KnockoutJs：安裝

MVVM模式

MVVM（模型-視圖-視圖模型）架構是一種廣泛應用於使用者介面應用程式的軟體設計模式。 MVVM 在具有複雜和互動式使用者介面的應用程式中特別有用，因為它清楚地將業務邏輯與介面行為分開。這有利於程式碼維護、可測試性和可擴展性。

當使用者與 View 互動時，ViewModel 擷取這些操作並更新 Model 中的對應資料。當 Model 更新時，ViewModel 會接收這些變更並自動更新 View，反映使用者介面中的變更。 ViewModel 也可以執行特定操作，例如向伺服器發送請求以取得或傳送資料。

模型： 模型 代表應用程式的資料層。它處理業務邏輯、驗證規則、資料儲存和檢索。模型通常由表示特定於應用程式域的實體和功能的資料物件組成。

View： View 是應用程式的表示層，負責顯示 Model 資料並與使用者互動。它代表用戶互動以可視化和操作數據的圖形介面。在MVVM架構中，View盡可能與業務邏輯保持解耦，方便更新與取代。

ViewModel： ViewModel 是 MVVM 模式的核心部分。它充當 View 和 Model 之間的中介，在它們之間執行通訊和雙向資料綁定。 ViewModel 包含表示邏輯，將 Model 中的資料轉換為適合在 View 中顯示的形式。此外，ViewModel 管理使用者事件和回應，並根據需要與 Model 互動。

淘汰賽

Knockout.js 是一個開源 JavaScript 函式庫，可讓您建立動態和反應式使用者介面。它對於開發具有複雜和互動式使用者介面的 Web 應用程式特別有用。 KnockoutJs 是基於MVVM 設計模式(Model-View-ViewModel)，它將業務邏輯(Model) 與表示(View) 以及中間層分離名為ViewModel 的層。它獨立於任何其他結構。

KnockoutJs 是由 Microsoft 員工 Steve Sanderson 於 2010 年 7 月 5 日開發並維護的開源專案。

KnockoutJs 支援所有主流瀏覽器 - IE 6、Firefox 3.5、Chrome、Opera、Safari（桌面/行動）。 data-bind 屬性不是 HTML 原生的，儘管它是一個可接受的屬性（它與 HTML 5 嚴格相容，並且不會導致 HTML 4 出現問題，儘管驗證器表明它是一個無法識別的屬性）。但由於瀏覽器不知道這意味著什麼，所以需要啟動 KnockoutJs 才能生效。

使用 KnockoutJs 時，您的 view 層只是帶有聲明性綁定的 HTML 文檔，用於將其連結到 view-model 層。或者，您可以使用 models，它使用 view-model.

層中模型的資料來產生 HTML

只需將 script 區塊放置在 HTML 文件的底部或將其放置在頂部，並將內容包裝在 DOM 就緒處理程序中，例如 jQuery 的 $ 函數。

ko.applyBindings(myViewModel)：是在KnockoutJs中應用資料綁定並將ViewModel（或Model）綁定到介面使用者的方法（查看）。它將 ViewModel 連接到 DOM 中的 HTML 元素，允許來自 ViewModel 的資料自動反映在 UI 中，反之亦然。呼叫此方法時，KnockoutJs 會遍歷 DOM 來搜尋具有 KnockoutJs 資料綁定 指令的元素，並在這些元素與指令中指定的 ViewModel 屬性之間建立連結。

（可選）您可以傳遞第二個參數來定義要在文件的哪個部分搜尋資料綁定屬性。例如，ko.applyBindings(myViewModel, document.getElementById('someElementId'))。這會將啟動限制為 ID 為 someElementId 的元素及其後代，如果您想要擁有多個顯示模型並將每個模型與頁面的不同區域相關聯，這會很有用。

安裝

只要使用 <script> 引用 JavaScript 檔案即可HTML 頁面上的某處。 <br> </script>

<script type='text/javascript' src='knockout-3.5.1.js'></script>

顯然有必要更新 src 屬性以符合下載檔案的放置位置。

CDN

為了提供最快的下載速度，最好在官方 KnockoutJs 安裝指南網站上引用來自以下第三方 CDN 之一的 KnockoutJs。

以上是KnockoutJs 簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！