表單事件綁定在 KnockoutJs 中如何運作

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

文件

• 資料綁定語法
• 綁定上下文
• 「點選」綁定
• 「事件」綁定
• 「提交」綁定
• 「啟用」與「停用」綁定
• 「值」綁定
• 「textInput」綁定
• 「hasFocus」綁定
• 「已檢查」綁定
• 「選項」綁定
• 「selectedOptions」綁定
• 「uniqueName」綁定

---

綁定

在 KnockoutJs 中，綁定 是連接 ViewModel 邏輯（資料和業務邏輯）與 View (HTML) 的方式。簡而言之，正是透過 綁定，使用者介面自動反映資料的變化，而不需要直接操作 DOM。

KnockoutJ 中的綁定透過 HTML 元素上的 data-bind 屬性進行工作。您可以在該屬性中指定要使用的綁定和關聯值。

表單事件

點選

綁定 按一下新增了事件處理程序，以便在按一下關聯的 DOM 元素時呼叫所選的 JavaScript 函數。這最常用於標記為 、 的元素。和 ，但它實際上適用於任何可見的 DOM 元素。 KnockoutJs 將提供目前模型值作為第一個參數。

每次按一下該元素時，都會呼叫 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>

綁定值與結合使用。允許讀取和寫入任意 JavaScript 物件的值，而不僅僅是 string.

值

文字輸入

綁定 textInput 將欄位（ 或）綁定<em>ViewModel</em> 屬性，在<em>ViewModel</em> 屬性之間提供雙向更新和元素的值。 <em>綁定</em> textInput 為所有類型的使用者輸入提供即時 DOM 更新，包括自動完成、拖曳和剪貼簿事件。 <br>

<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中文網其他相關文章！