Magento 2 knockout component scopeMagento 2.1 Minicart Knockout TypeErrorMagento 2 Knockout JS - What does this._super() do?How to call multiple Knockout templates within one componentDatepicker Options in Knockout JS Binding is not workingKnockout JS custom scope bindingMagento 2 - Add success message with knockoutMagento 2 knockout js check variable value to specific valueInjecting and calling custom knockout component in another componentHow to insert a UI component into the mini cart?Knockout binding js to template
Is it a problem if <h4>, <h5> and <h6> are smaller than regular text?
Programming bare microcontroller chips
Pre-1972 sci-fi short story or novel: alien(?) tunnel where people try new moves and get destroyed if they're not the correct ones
Winning Strategy for the Magician and his Apprentice
What ways have you found to get edits from non-LaTeX users?
Taxi Services at Didcot
bash script: "*.jpg" expansion not working as expected inside $(...), for picking a random file
SOQL Not Recognizing Field?
Is it possible to 'live off the sea'
Why didn't Voldemort recognize that Dumbledore was affected by his curse?
Generate a Graeco-Latin square
Find the limit of a multiplying term function when n tends to infinity.
System.StringException: Unexpected end of expression
What do abbreviations in movie scripts stand for?
Prime Sieve and brute force
Are there downsides to using std::string as a buffer?
C++ Arduino IDE receiving garbled `char` from function
How to handle self harm scars on the arm in work environment?
What language is software running on the ISS written in?
Why did the Herschel Space Telescope need helium coolant?
1980s live-action movie where individually-coloured nations on clouds fight
How to deal with apathetic co-worker?
Does Disney no longer produce hand-drawn cartoon films?
Is open-sourcing the code of a webapp not recommended?
Magento 2 knockout component scope
Magento 2.1 Minicart Knockout TypeErrorMagento 2 Knockout JS - What does this._super() do?How to call multiple Knockout templates within one componentDatepicker Options in Knockout JS Binding is not workingKnockout JS custom scope bindingMagento 2 - Add success message with knockoutMagento 2 knockout js check variable value to specific valueInjecting and calling custom knockout component in another componentHow to insert a UI component into the mini cart?Knockout binding js to template
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I have two knockout components. The xml in layout is:
<body>
<referenceContainer name="content">
<block class="VendorModuleBlockList" name="some_name" template="list.phtml">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="js_list" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/js-list</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Vendor_Module/js-list</item>
</item>
<item name="children" xsi:type="array">
<item name="js_item" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/js-item</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Vendor_Module/js-item</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</block>
</referenceContainer>
</body>
The component js_list has a template that contains the fallowing:
<div data-bind="foreach: someArray, visible: someArray().length > 0 ">
<p data-bind="scope: 'js_list.js_item'">
<!-- ko template: getTemplate() --><!-- /ko -->
<p data-bind="text: testVarThatPrintsTest"></p>
</p>
</div>
The content of the template from the component js_item is printed out but when I try to access the variable defined in it testVarThatPrintsTest :
define(
['jquery', 'ko', 'uiComponent', 'Magento_Ui/js/modal/modal', 'domReady!'],
function($, ko, Component, modal)
'use strict';
return Component.extend(
initialize: function()
this._super();
,
defaults:
template: 'Vendor_Module/js-item',
testVarThatPrintsTest: 'TEST TEST TEST@'
);
);
I get the fallowing error:
Message: testVarThatPrintsTest is not defined
at text (eval at createBindingsStringEvaluator (knockout.js:2624), <anonymous>:3:57)
at update (knockout.js:4260)
at ko.dependentObservable.disposeWhenNodeIsRemoved (knockout.js:3004)
at evaluateImmediate (knockout.js:1737)
at Object.ko.computed.ko.dependentObservable (knockout.js:1946)
at knockout.js:3002
at Object.arrayForEach (knockout.js:151)
at applyBindingsToNodeInternal (knockout.js:2974)
at applyBindingsToNodeAndDescendantsInternal (knockout.js:2854)
at Object.ko.applyBindings (knockout.js:3065)
What is the problem here?
magento-2.1 uicomponent knockoutjs
asked Nov 13 '17 at 7:57
Lachezar RaychevLachezar Raychev
67741535
add a comment |
I have two knockout components. The xml in layout is:
<body>
<referenceContainer name="content">
<block class="VendorModuleBlockList" name="some_name" template="list.phtml">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="js_list" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/js-list</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Vendor_Module/js-list</item>
</item>
<item name="children" xsi:type="array">
<item name="js_item" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/js-item</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Vendor_Module/js-item</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</block>
</referenceContainer>
</body>
The component js_list has a template that contains the fallowing:
<div data-bind="foreach: someArray, visible: someArray().length > 0 ">
<p data-bind="scope: 'js_list.js_item'">
<!-- ko template: getTemplate() --><!-- /ko -->
<p data-bind="text: testVarThatPrintsTest"></p>
</p>
</div>
The content of the template from the component js_item is printed out but when I try to access the variable defined in it testVarThatPrintsTest :
define(
['jquery', 'ko', 'uiComponent', 'Magento_Ui/js/modal/modal', 'domReady!'],
function($, ko, Component, modal)
'use strict';
return Component.extend(
initialize: function()
this._super();
,
defaults:
template: 'Vendor_Module/js-item',
testVarThatPrintsTest: 'TEST TEST TEST@'
);
);
I get the fallowing error:
Message: testVarThatPrintsTest is not defined
at text (eval at createBindingsStringEvaluator (knockout.js:2624), <anonymous>:3:57)
at update (knockout.js:4260)
at ko.dependentObservable.disposeWhenNodeIsRemoved (knockout.js:3004)
at evaluateImmediate (knockout.js:1737)
at Object.ko.computed.ko.dependentObservable (knockout.js:1946)
at knockout.js:3002
at Object.arrayForEach (knockout.js:151)
at applyBindingsToNodeInternal (knockout.js:2974)
at applyBindingsToNodeAndDescendantsInternal (knockout.js:2854)
at Object.ko.applyBindings (knockout.js:3065)
What is the problem here?
magento-2.1 uicomponent knockoutjs
asked Nov 13 '17 at 7:57
Lachezar RaychevLachezar Raychev
67741535
remove comma at the end from string testVarThatPrintsTest: 'TEST TEST TEST@',
– Rakesh Jesadiya
Nov 13 '17 at 10:33
that is not the problem
– Lachezar Raychev
Nov 13 '17 at 10:36
add a comment |
I have two knockout components. The xml in layout is:
<body>
<referenceContainer name="content">
<block class="VendorModuleBlockList" name="some_name" template="list.phtml">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="js_list" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/js-list</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Vendor_Module/js-list</item>
</item>
<item name="children" xsi:type="array">
<item name="js_item" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/js-item</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Vendor_Module/js-item</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</block>
</referenceContainer>
</body>
The component js_list has a template that contains the fallowing:
<div data-bind="foreach: someArray, visible: someArray().length > 0 ">
<p data-bind="scope: 'js_list.js_item'">
<!-- ko template: getTemplate() --><!-- /ko -->
<p data-bind="text: testVarThatPrintsTest"></p>
</p>
</div>
The content of the template from the component js_item is printed out but when I try to access the variable defined in it testVarThatPrintsTest :
define(
['jquery', 'ko', 'uiComponent', 'Magento_Ui/js/modal/modal', 'domReady!'],
function($, ko, Component, modal)
'use strict';
return Component.extend(
initialize: function()
this._super();
,
defaults:
template: 'Vendor_Module/js-item',
testVarThatPrintsTest: 'TEST TEST TEST@'
);
);
I get the fallowing error:
Message: testVarThatPrintsTest is not defined
at text (eval at createBindingsStringEvaluator (knockout.js:2624), <anonymous>:3:57)
at update (knockout.js:4260)
at ko.dependentObservable.disposeWhenNodeIsRemoved (knockout.js:3004)
at evaluateImmediate (knockout.js:1737)
at Object.ko.computed.ko.dependentObservable (knockout.js:1946)
at knockout.js:3002
at Object.arrayForEach (knockout.js:151)
at applyBindingsToNodeInternal (knockout.js:2974)
at applyBindingsToNodeAndDescendantsInternal (knockout.js:2854)
at Object.ko.applyBindings (knockout.js:3065)
What is the problem here?
magento-2.1 uicomponent knockoutjs
asked Nov 13 '17 at 7:57
Lachezar RaychevLachezar Raychev
67741535
I have two knockout components. The xml in layout is:
<body>
<referenceContainer name="content">
<block class="VendorModuleBlockList" name="some_name" template="list.phtml">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="js_list" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/js-list</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Vendor_Module/js-list</item>
</item>
<item name="children" xsi:type="array">
<item name="js_item" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/js-item</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Vendor_Module/js-item</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</block>
</referenceContainer>
</body>
The component js_list has a template that contains the fallowing:
<div data-bind="foreach: someArray, visible: someArray().length > 0 ">
<p data-bind="scope: 'js_list.js_item'">
<!-- ko template: getTemplate() --><!-- /ko -->
<p data-bind="text: testVarThatPrintsTest"></p>
</p>
</div>
The content of the template from the component js_item is printed out but when I try to access the variable defined in it testVarThatPrintsTest :
define(
['jquery', 'ko', 'uiComponent', 'Magento_Ui/js/modal/modal', 'domReady!'],
function($, ko, Component, modal)
'use strict';
return Component.extend(
initialize: function()
this._super();
,
defaults:
template: 'Vendor_Module/js-item',
testVarThatPrintsTest: 'TEST TEST TEST@'
);
);
I get the fallowing error:
Message: testVarThatPrintsTest is not defined
at text (eval at createBindingsStringEvaluator (knockout.js:2624), <anonymous>:3:57)
at update (knockout.js:4260)
at ko.dependentObservable.disposeWhenNodeIsRemoved (knockout.js:3004)
at evaluateImmediate (knockout.js:1737)
at Object.ko.computed.ko.dependentObservable (knockout.js:1946)
at knockout.js:3002
at Object.arrayForEach (knockout.js:151)
at applyBindingsToNodeInternal (knockout.js:2974)
at applyBindingsToNodeAndDescendantsInternal (knockout.js:2854)
at Object.ko.applyBindings (knockout.js:3065)
What is the problem here?
magento-2.1 uicomponent knockoutjs
magento-2.1 uicomponent knockoutjs
asked Nov 13 '17 at 7:57
Lachezar RaychevLachezar Raychev
67741535
asked Nov 13 '17 at 7:57
Lachezar RaychevLachezar Raychev
67741535
edited Nov 13 '17 at 10:42
Lachezar Raychev
asked Nov 13 '17 at 7:57
Lachezar RaychevLachezar Raychev
67741535
asked Nov 13 '17 at 7:57
Lachezar RaychevLachezar Raychev
67741535
asked Nov 13 '17 at 7:57
Lachezar RaychevLachezar Raychev
67741535
67741535
remove comma at the end from string testVarThatPrintsTest: 'TEST TEST TEST@',
– Rakesh Jesadiya
Nov 13 '17 at 10:33
that is not the problem
– Lachezar Raychev
Nov 13 '17 at 10:36
add a comment |
remove comma at the end from string testVarThatPrintsTest: 'TEST TEST TEST@',
– Rakesh Jesadiya
Nov 13 '17 at 10:33
that is not the problem
– Lachezar Raychev
Nov 13 '17 at 10:36
remove comma at the end from string testVarThatPrintsTest: 'TEST TEST TEST@',
– Rakesh Jesadiya
Nov 13 '17 at 10:33
remove comma at the end from string testVarThatPrintsTest: 'TEST TEST TEST@',
– Rakesh Jesadiya
Nov 13 '17 at 10:33
that is not the problem
– Lachezar Raychev
Nov 13 '17 at 10:36
that is not the problem
– Lachezar Raychev
Nov 13 '17 at 10:36
add a comment |
1 Answer
1
active
oldest
votes
The problem was that the scope and the binding happened to a element. Probably has something to do with the inline nature of the element and the fact that I was trying to add block elements(from the child component template) to the content of an inline element. When I changed the code to
<div data-bind="foreach: someArray, visible: someArray().length > 0 ">
<div data-bind="scope: 'js_list.js_item'">
<!-- ko template: getTemplate() --><!-- /ko -->
<div data-bind="text: testVarThatPrintsTest"></div>
</div>
</div>
Everything started working just fine.
answered Nov 13 '17 at 12:12
Lachezar RaychevLachezar Raychev
67741535
add a comment |
Your Answer
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "479"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f201163%2fmagento-2-knockout-component-scope%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The problem was that the scope and the binding happened to a element. Probably has something to do with the inline nature of the element and the fact that I was trying to add block elements(from the child component template) to the content of an inline element. When I changed the code to
<div data-bind="foreach: someArray, visible: someArray().length > 0 ">
<div data-bind="scope: 'js_list.js_item'">
<!-- ko template: getTemplate() --><!-- /ko -->
<div data-bind="text: testVarThatPrintsTest"></div>
</div>
</div>
Everything started working just fine.
answered Nov 13 '17 at 12:12
Lachezar RaychevLachezar Raychev
67741535
add a comment |
The problem was that the scope and the binding happened to a element. Probably has something to do with the inline nature of the element and the fact that I was trying to add block elements(from the child component template) to the content of an inline element. When I changed the code to
<div data-bind="foreach: someArray, visible: someArray().length > 0 ">
<div data-bind="scope: 'js_list.js_item'">
<!-- ko template: getTemplate() --><!-- /ko -->
<div data-bind="text: testVarThatPrintsTest"></div>
</div>
</div>
Everything started working just fine.
answered Nov 13 '17 at 12:12
Lachezar RaychevLachezar Raychev
67741535
add a comment |
The problem was that the scope and the binding happened to a element. Probably has something to do with the inline nature of the element and the fact that I was trying to add block elements(from the child component template) to the content of an inline element. When I changed the code to
<div data-bind="foreach: someArray, visible: someArray().length > 0 ">
<div data-bind="scope: 'js_list.js_item'">
<!-- ko template: getTemplate() --><!-- /ko -->
<div data-bind="text: testVarThatPrintsTest"></div>
</div>
</div>
Everything started working just fine.
answered Nov 13 '17 at 12:12
Lachezar RaychevLachezar Raychev
67741535
The problem was that the scope and the binding happened to a element. Probably has something to do with the inline nature of the element and the fact that I was trying to add block elements(from the child component template) to the content of an inline element. When I changed the code to
<div data-bind="foreach: someArray, visible: someArray().length > 0 ">
<div data-bind="scope: 'js_list.js_item'">
<!-- ko template: getTemplate() --><!-- /ko -->
<div data-bind="text: testVarThatPrintsTest"></div>
</div>
</div>
Everything started working just fine.
answered Nov 13 '17 at 12:12
Lachezar RaychevLachezar Raychev
67741535
answered Nov 13 '17 at 12:12
Lachezar RaychevLachezar Raychev
67741535
answered Nov 13 '17 at 12:12
Lachezar RaychevLachezar Raychev
67741535
answered Nov 13 '17 at 12:12
Lachezar RaychevLachezar Raychev
67741535
67741535
add a comment |
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f201163%2fmagento-2-knockout-component-scope%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
remove comma at the end from string testVarThatPrintsTest: 'TEST TEST TEST@',
– Rakesh Jesadiya
Nov 13 '17 at 10:33
that is not the problem
– Lachezar Raychev
Nov 13 '17 at 10:36