javascriptmagento2
If I add this to a CMS page then it pull in the javascript to the page correctly:
<script type="text/javascript">
requirejs(['jquery', 'bootstrap'], function (jQuery, jQueryBootstrap) {
});
</script>
But if I try it with data attribute like so:
<div data-mage-init='{"bootstrap": {}}'>
</div>
Then the javascript is not pulled into the page.
Do data attributes only work in phtml files? Docs seem to say I can use either.
All javascript should use the require-js. In your case you should try something like:
<script type="text/javascript">
require(['jquery'],function($){
//$.doStuff
});
</script>
Im not sure if this will solve the external library. If not, then i guess you will have to add the external library to requirejs-config. There is plenty of information here:
I'm still not entirely sure on what data you need to pass through, you can pass data to HTML templates the same was you would to a PHTML template.
A simple example:
Ben/TemplateTest/view/frontend/templates/container.phtml
<div data-bind="scope: 'templateTest'">
<!-- ko template: getTemplate() --><!-- /ko -->
</div>
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"templateTest": {
"component": "Ben_TemplateTest/js/template-test"
}
}
}
}
}
</script>
Ben/TemplateTest/view/frontend/web/template/test.html
<h2>Template Test</h2>
<p data-bind="text: message"></p>
Ben/TemplateTest/view/frontend/web/js/template-test.js
define(['jquery', 'ko', 'uiComponent', 'domReady!'], function($, ko, Component) {
'use strict';
return Component.extend({
initialize: function() {
this._super();
},
defaults: {
message: 'This is a test message!',
template: 'Ben_TemplateTest/test'
}
});
});
Here you can see the data being passed through to the HTML template.
To call additional templates you can use:
<!-- ko template: "Package_Namespace/template-name" --><!-- /ko -->
Or pass it a property from your JS:
<!-- ko template: someProp --><!-- /ko -->
Best Answer
The lack of quotation marks around the configuration part of the init config may be causing a JSON parse error (visible in developer tools javascript console).