このコンテンツは基本的にオリジナル資料の翻訳です。目的は、Magento 2 の KnockoutJs について学び、KnockoutJs に関するポルトガル語のコンテンツを作成することです。
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 イベントによる標準アクションの実行を防ぎます。これは、 タグで binding click を使用すると、ブラウザは関数を呼び出すだけで、リンクの href には移動しないことを意味します。クリックツークリック バインディングは通常、別の Web ページへの通常のハイパーリンクとしてではなく、ViewModel を操作する UI の一部としてリンクを使用する場合に使用されます。標準のクリック アクションを続行する必要がある場合は、関数内で true を返すだけです。
binding イベントを使用すると、指定したイベントのイベント ハンドラーを追加して、関連する 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>
binding submit * は、フォーム上の送信バインディング ディレクティブであり、そのフォームに対するブラウザのデフォルトの送信アクションを防ぎます。つまり、ブラウザはハンドラー関数を呼び出しますが、そうではありません。フォームをサーバーに送信します。 *submit バインディングは通常、フォームが通常の HTML フォームとしてではなく、ViewModel へのインターフェイスとして使用される場合に使用されます。フォームを通常の 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>
binding Enable は、パラメーター値が true の場合に、関連付けられた DOM 要素を有効にします。 binding disable は逆に機能し、値が true の場合、関連付けられた DOM 要素が無効になります。
<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>
binding 値 *は、*ViewModel のプロパティに関連付けられた DOM 要素の値をバインドします。これは通常、、