以下は Ojet コンポーネントです。「p_id」を OJet コンポーネントからメニューの「contextMenuItemSelect」関数に渡したいと考えています。
ui.item.children("a").text() は選択したオプションを取得できますが、それぞれのリスト項目の p_id を取得したいので、選択したオプションに基づいて編集または表示に移動します。
これはどのように行うことができますか??
Ojet コンポーネント
<script type="text/html" id="server_template">
<li data-bind="attr: {id: $data['p_id']}">
<div class="oj-flex">
<div class="oj-lg-12 oj-md-12 oj-sm-12">
<div class="oj-flex row portfolio-list">
<!-- Portfolio Name and Description -->
<div class="oj-lg-4 oj-sm-12">
<h2>
<a href="#" data-bind="text: p_id, click: getView"></a>
</h2>
<span class="data"><span data-bind="text: desc"></span></span>
</div>
<div id="menubutton-container">
<button id="menuButton2"
data-bind="
ojComponent: {component: 'ojButton', display: 'icons',
icons: {start:'demo-icon-font demo-gear-icon-16'},
label: 'Button with two icons and no text',
menu: '#myMenu2'}">
</button>
// The below span gives the list ID correctly
<span data-bind="text: p_id"></span>
<ul id="myMenu2" data-bind="attr:{title: p_id},ojComponent: {component: 'ojMenu', select:contextMenuItemSelect}" style="display:none">
// The below span always gives the 1st id on the list
<span data-bind="text: p_id"></span>
<!-- ko template: {name: 'menuItemTemplate', foreach: items, as: 'item'} -->
<!-- /ko -->
</ul>
</div>
</div>
</div>
</div>
</li>
</script>
メニュー テンプレート
<script type="text/html" id="menuItemTemplate">
<li data-bind="css: {'oj-disabled': item.disabled}">
<a href="#" data-bind="text: name"></a>
<!-- ko if: item.items -->
<ul data-bind="template: {name: 'menuItemTemplate', foreach: item.items, as: 'item'}">
</ul>
<!-- /ko -->
</li>
JS 関数
self.contextMenuItemSelect = function( event, ui ) {
console.log(ui.item);
var option = ui.item.children("a").text();
}