此內(nèi)容基本上是原始材料的翻譯。目的是了解 Magento 2 的 KnockoutJs 并用葡萄牙語創(chuàng)建有關(guān) KnockouJs 的內(nèi)容。

文檔

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

MVVM模式

MVVM（模型-視圖-視圖模型）架構(gòu)是一種廣泛應(yīng)用于用戶界面應(yīng)用程序的軟件設(shè)計(jì)模式。 MVVM 在具有復(fù)雜和交互式用戶界面的應(yīng)用程序中特別有用，因?yàn)樗宄貙I(yè)務(wù)邏輯與界面行為分開。這有利于代碼維護(hù)、可測試性和可擴(kuò)展性。

當(dāng)用戶與 View 交互時(shí)，ViewModel 捕獲這些操作并更新 Model 中的相應(yīng)數(shù)據(jù)。當(dāng) Model 更新時(shí)，ViewModel 會(huì)接收這些更改并自動(dòng)更新 View，反映用戶界面中的更改。 ViewModel 還可以執(zhí)行特定操作，例如向服務(wù)器發(fā)送請求以獲取或發(fā)送數(shù)據(jù)。

模型： 模型 代表應(yīng)用程序的數(shù)據(jù)層。它處理業(yè)務(wù)邏輯、驗(yàn)證規(guī)則、數(shù)據(jù)存儲(chǔ)和檢索。模型通常由表示特定于應(yīng)用程序域的實(shí)體和功能的數(shù)據(jù)對象組成。

View： View 是應(yīng)用程序的表示層，負(fù)責(zé)顯示 Model 數(shù)據(jù)并與用戶交互。它代表用戶交互以可視化和操作數(shù)據(jù)的圖形界面。在MVVM架構(gòu)中，View與業(yè)務(wù)邏輯盡可能保持解耦，方便更新和替換。

ViewModel： ViewModel 是 MVVM 模式的核心部分。它充當(dāng) View 和 Model 之間的中介，在它們之間執(zhí)行通信和雙向數(shù)據(jù)綁定。 ViewModel 包含表示邏輯，將 Model 中的數(shù)據(jù)轉(zhuǎn)換為適合在 View 中顯示的形式。此外，ViewModel 管理用戶事件和響應(yīng)，根據(jù)需要與 Model 交互。

淘汰賽

Knockout.js 是一個(gè)開源 JavaScript 庫，可讓您創(chuàng)建動(dòng)態(tài)和反應(yīng)式用戶界面。它對于開發(fā)具有復(fù)雜和交互式用戶界面的 Web 應(yīng)用程序特別有用。 KnockoutJs 基于 MVVM 設(shè)計(jì)模式 (Model-View-ViewModel)，它將業(yè)務(wù)邏輯 (Model) 與表示 (View) 以及中間層分離名為 ViewModel 的層。它獨(dú)立于任何其他結(jié)構(gòu)。

KnockoutJs 是由 Microsoft 員工 Steve Sanderson 于 2010 年 7 月 5 日開發(fā)并維護(hù)的開源項(xiàng)目。

KnockoutJs 支持所有主流瀏覽器 - IE 6、Firefox 3.5、Chrome、Opera、Safari（桌面/移動(dòng)）。 data-bind 屬性不是 HTML 原生的，盡管它是一個(gè)可接受的屬性（它與 HTML 5 嚴(yán)格兼容，并且不會(huì)導(dǎo)致 HTML 4 出現(xiàn)問題，盡管驗(yàn)證器表明它是一個(gè)無法識別的屬性）。但由于瀏覽器不知道這意味著什么，所以需要激活 KnockoutJs 才能生效。

使用 KnockoutJs 時(shí)，您的 view 層只是帶有聲明性綁定的 HTML 文檔，用于將其鏈接到 view-model 層?；蛘?，您可以使用 models，它使用 view-model.

只需將 script 塊放置在 HTML 文檔的底部或?qū)⑵浞胖迷陧敳?，并將?nèi)容包裝在 DOM 就緒處理程序中，如 jQuery 的 $ 函數(shù)。

ko.applyBindings(myViewModel)：是在KnockoutJs中應(yīng)用數(shù)據(jù)綁定并將ViewModel（或Model）綁定到界面用戶的方法（查看）。它將 ViewModel 連接到 DOM 中的 HTML 元素，允許來自 ViewModel 的數(shù)據(jù)自動(dòng)反映在 UI 中，反之亦然。調(diào)用此方法時(shí)，KnockoutJs 會(huì)遍歷 DOM 來搜索具有 KnockoutJs 數(shù)據(jù)綁定 指令的元素，并在這些元素與指令中指定的 ViewModel 屬性之間創(chuàng)建鏈接。

（可選）您可以傳遞第二個(gè)參數(shù)來定義要在文檔的哪個(gè)部分搜索數(shù)據(jù)綁定屬性。例如，ko.applyBindings(myViewModel, document.getElementById('someElementId'))。這會(huì)將激活限制為 ID 為 someElementId 的元素及其后代，如果您想要擁有多個(gè)顯示模型并將每個(gè)模型與頁面的不同區(qū)域相關(guān)聯(lián)，這會(huì)很有用。

安裝

只需使用 <script> 引用 JavaScript 文件即可HTML 頁面上的某處。<br> </script>

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

顯然有必要更新 src 屬性以匹配下載文件的放置位置。

CDN

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

以上是KnockoutJs 簡介的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！