I found the following code in Magento 2 HTML:

<div id="cart-totals" class="cart-totals" data-bind="scope:'block-totals'">

Magento 2 uses Knockout on frontend but I cannot found in Knockout docs what does keyword "scope" mean in this context. Is it a Magento 2 feature?

I found the following code in Magento 2 HTML:

<div id="cart-totals" class="cart-totals" data-bind="scope:'block-totals'">

Magento 2 uses Knockout on frontend but I cannot found in Knockout docs what does keyword "scope" mean in this context. Is it a Magento 2 feature?

• javascript
• mvvm
• knockout.js
• scope
• magento2

• Searching for "magento scope binding" returns this magento-quickies.alanstorm./post/145884289995/… which also led me to find out that there's a magento site on SE magento.stackexchange. you'd be surprised what you can find through a simple search. – user1228 Commented Apr 26, 2017 at 16:07

3 Answers 3

Your assumption is right, the scope binding is not build-in into knockout, but a magento feature.

From what I understood, magento uses the applyBindings function from knockout without assigning a viewmodel. The scope binding then looks for and loads a registered viewmodel (in this case: 'block-totals') and applies this to the DOM node, where you have your scope binding.

For detailed information, have a look here (and give the guy some credit, too :))

https://magento.stackexchange./questions/120447/how-does-magento-2-apply-knockoutjs-bindings

http://alanstorm./magento_2_knockoutjs_integration/

The scope is referring to the file, which is defined in the {xyz}.xml file as a JavaScript ponent.

scope keyword is not a part of standard Knockout.js. It is a Magento 2-specific feature that extends Knockout.js functionality.

It defines the context or "scope" in which the bindings will be applied. Essentially, it specifies a ViewModel (in this case, block-totals) that will be used as the context for all child bindings within the element.