Template
- Removed id's since there shouldn't be more than one element on page with the same id
- Wrapped list item text with a span since trying to output the text of the
li
element would also output the button text
With Magento Init Script
<div>
<ul class="list-group" data-role="item-announcer">
<li>
<button data-action="announce-item">click</button>
<span data-role="item">Item 1</span>
</li>
<li>
<button data-action="announce-item">click</button>
<span data-role="item">Item 2</span>
</li>
</ul>
</div>
<script type="text/x-magento-init">
{
"[data-role=item-announcer]": {
"Magento_Theme/js/item-announcer": {}
}
}
</script>
With Data Mage Init Attribute
<div>
<ul class="list-group" data-mage-init='{"Magento_Theme/js/item-announcer": {}}'>
<li>
<button data-action="announce-item">click</button>
<span data-role="item">Item 1</span>
</li>
<li>
<button data-action="announce-item">click</button>
<span data-role="item">Item 2</span>
</li>
</ul>
</div>
Component
In app/design/frontend/[vendor]/[theme]/Magento_Theme/web/js/item-announcer.js:
define([
'jquery',
'domReady!'
], function($) {
return function(config, element) {
let actionSelector = '[data-action=announce-item]';
let itemSelector = '[data-role=item]';
$(element).on('click', actionSelector, function (e) {
e.preventDefault();
let item = $(this).siblings(itemSelector);
console.log(item.text());
});
}
});
With Knockout Component
Template
<?php
/** @var \Magento\Framework\View\Element\Template $block */
$jsId = $block->getJsId();
$items = [
[
'name' => 'Item 1'
],
[
'name' => 'Item 2'
]
];
?>
<div data-bind="scope: 'item-announcer-<?= $jsId; ?>'">
<ul class="list-group" data-bind="visible: isVisible()" style="display: none;">
<!-- ko foreach: items -->
<li>
<button data-bind="click: $parent.announce">click</button>
<span data-bind="text: name"></span>
</li>
<!-- /ko -->
</ul>
</div>
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"item-announcer-<?= $jsId; ?>": {
"component": "Magento_Theme/js/item-announcer",
"items": <?= json_encode($items); ?>
}
}
}
}
}
</script>
Component
In app/design/frontend/[vendor]/[theme]/Magento_Theme/web/js/item-announcer.js:
define([
'uiComponent'
], function(Component) {
return Component.extend({
defaults: {
items: []
},
/**
* @inheritdoc
*/
initObservable: function () {
this._super()
.observe('items');
return this;
},
/**
* Announce Text
*
* @param item
*/
announce: function (item) {
console.log(item.name);
},
/**
* Get whether component is visible
*
* @returns {boolean}
*/
isVisible: function () {
return this.items().length > 0;
}
});
});