此內容基本上是原始資料的翻譯。目的是了解 Magento 2 的 KnockoutJs 並用葡萄牙語創建有關 KnockouJs 的內容。
在 KnockoutJs 中，綁定 是連接 ViewModel 邏輯（資料和業務邏輯）與 View (HTML) 的方式。簡而言之，正是透過 綁定，使用者介面自動反映資料的變化，而不需要直接操作 DOM。
KnockoutJ 中的綁定透過 HTML 元素上的 data-bind 屬性進行工作。您可以在該屬性中指定要使用的綁定和關聯值。
綁定 按一下新增了事件處理程序，以便在按一下關聯的 DOM 元素時呼叫所選的 JavaScript 函數。這最常用於標記為
每次按一下該元素時，都會呼叫 ViewModel 中傳遞的方法，該方法又會更改 ViewModel 的狀態，導致 UI已更新。
<div>
You've clicked <span data-bind="text: numberOfClicks"></span> times
<button data-bind="click: incrementClickCounter">Click me</button>
</div>
<script type="text/javascript">
ko.applyBindings({
numberOfClicks : ko.observable(0),
incrementClickCounter : function() {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
}
});
</script>
預設情況下，KnockoutJs 將阻止 click 事件執行任何標準操作。這表示當在 標籤上使用 綁定 click 時，瀏覽器將只呼叫該函數，而不會導航到連結的 href。當您將連結用作操作 ViewModel 的 UI 的一部分（而不是作為指向另一個網頁的普通超連結）時，通常會使用點擊綁定。如果標準點擊操作需要繼續，只需在函數中傳回 true 即可。
綁定 事件可讓您為指定事件新增事件處理程序，以便在關聯 DOM 元素觸發該事件時呼叫您選擇的 JavaScript 函數。這可用於綁定任何事件，例如按鍵、滑鼠懸停或滑鼠退出。
<div>
You've clicked <span data-bind="text: numberOfClicks"></span> times
<button data-bind="click: incrementClickCounter">Click me</button>
</div>
<script type="text/javascript">
ko.applyBindings({
numberOfClicks : ko.observable(0),
incrementClickCounter : function() {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
}
});
</script>
綁定提交*是表單上的提交綁定指令，將阻止瀏覽器對該表單的預設提交操作，換句話說，瀏覽器將調用處理函數，但不會將表單傳送到伺服器。當表單用作 ViewModel 的介面（而不是普通的 HTML 表單）時，通常會使用 *submit 綁定。如果表單需要以普通 HTML 表單提交，只需從提交處理程序傳回 true 即可。
<div>
<div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
Mouse over me
</div>
<div data-bind="visible: detailsEnabled">
Details
</div>
</div>
<script type="text/javascript">
ko.applyBindings({
detailsEnabled: ko.observable(false),
enableDetails: function() {
this.detailsEnabled(true);
},
disableDetails: function() {
this.detailsEnabled(false);
}
});
</script>
綁定 enable 會導致關聯的 DOM 元素在其參數值為 true 時啟用。 綁定 disable 以相反的方式運作，導致關聯的 DOM 元素在其值為 true 時被停用。
<form data-bind="submit: doSomething">
<button type="submit">Submit</button>
</form>
<script type="text/javascript">
ko.applyBindings({
this.doSomething = function(formElement) {
// ... now do something
}
});
</script>
綁定值*綁定與*ViewModel中的屬性關聯的DOM元素的值。這通常對於 、
當使用者編輯關聯表單控制項中的值時，ViewModel 中的值將會更新。同樣，當 ViewModel 更新值時，這將更新螢幕上表單控制項的值。
<p>
<input type='checkbox' data-bind="checked: hasCellphone" />
I have a cellphone
</p>
<p>
Your cellphone number:
<input type='text' data-bind="value: cellphoneNumber, enable: hasCellphone" />
</p>
<script type="text/javascript">
ko.applyBindings({
hasCellphone : ko.observable(false),
cellphoneNumber: ""
});
</script>
綁定值與
綁定 textInput 將欄位（ 或
<p>Login name: <input data-bind="value: userName" /></p>
<p>Password: <input type="password" data-bind="value: userPassword" /></p>
<script type="text/javascript">
ko.applyBindings({
userName: ko.observable(""), // Initially blank
userPassword: ko.observable("abc"), // Prepopulate
});
</script>
預設情況下，綁定 textInput 僅在使用者將焦點從文字方塊移開時更新其模型。 綁定 textInput 透過每次按鍵或其他文字輸入機制立即更新其模型。
綁定 hasFocus 將 DOM 元素的焦點狀態綁定到 ViewModel 屬性。這是一種雙向連接，當 ViewModel 屬性設為 true 或 false 時，關聯元素將獲得焦點或不焦點。
<div>
You've clicked <span data-bind="text: numberOfClicks"></span> times
<button data-bind="click: incrementClickCounter">Click me</button>
</div>
<script type="text/javascript">
ko.applyBindings({
numberOfClicks : ko.observable(0),
incrementClickCounter : function() {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
}
});
</script>
選取的綁定綁定一個可勾選的表單控件，即一個複選框（）或一個單選按鈕（） ViewModel.
中的屬性
<div>
<div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
Mouse over me
</div>
<div data-bind="visible: detailsEnabled">
Details
</div>
</div>
<script type="text/javascript">
ko.applyBindings({
detailsEnabled: ko.observable(false),
enableDetails: function() {
this.detailsEnabled(true);
},
disableDetails: function() {
this.detailsEnabled(false);
}
});
</script>
綁定選項控制哪些選項應出現在下拉清單（
分配的值必須是陣列（或Observable Array）。 然後它將為您的陣列中的每個項目顯示一個項目。
<form data-bind="submit: doSomething">
<button type="submit">Submit</button>
</form>
<script type="text/javascript">
ko.applyBindings({
this.doSomething = function(formElement) {
// ... now do something
}
});
</script>
綁定 selectedOptions 控制目前選擇多選清單中的哪些元素。它旨在與
當使用者選擇或取消選擇多選清單中的某個項目時，會在 ViewModel 中的陣列中新增或刪除對應的值。同樣，假設它是ViewModel 中的Observable Array，每當您從該array 添加或刪除項目時，UI 中的相應項目都會被選擇或取消選擇。這是雙向連線。
<p>
<input type='checkbox' data-bind="checked: hasCellphone" />
I have a cellphone
</p>
<p>
Your cellphone number:
<input type='text' data-bind="value: cellphoneNumber, enable: hasCellphone" />
</p>
<script type="text/javascript">
ko.applyBindings({
hasCellphone : ko.observable(false),
cellphoneNumber: ""
});
</script>
綁定 uniqueName 確保綁定的 DOM 元素具有非空名稱屬性。如果 DOM 元素沒有 name 屬性，此連接將提供一個並將其設為某個唯一的字串值。
<p>Login name: <input data-bind="value: userName" /></p>
<p>Password: <input type="password" data-bind="value: userPassword" /></p>
<script type="text/javascript">
ko.applyBindings({
userName: ko.observable(""), // Initially blank
userPassword: ko.observable("abc"), // Prepopulate
});
</script>
以上是表單事件綁定在 KnockoutJs 中如何運作的詳細內容。更多資訊請關注PHP中文網其他相關文章！
