下拉菜单 OracleJet / Javascript答案

【问题标题】：dropdown menu OracleJet / Javascript下拉菜单 OracleJet / Javascript
【发布时间】：2019-10-29 12:14:17
【问题描述】：

我试图在 oracle JET 中实现下拉菜单，但如果我点击菜单链接它不起作用:(我做错了什么？

html:

<div id='menubutton-container'>
<oj-menu id="myMenu" slot="menu" style="display:none" on-oj-action="[[menuItemAction]]">
<oj-option id="ac" value="Additional Compensation" >
    <span class="demo-icon-font demo-fire-icon-24" slot="startIcon"></span>
    <a id="1ds" href="#2"
       data-bind="click: menuItemAction">MyLink</a>
</oj-menu>
</oj-menu-button>
</div>

vieModel js：

self.selectedMenuItem = ko.observable("(None selected yet)");
self.menuItemAction = function( data, event )
{
    this.selectedMenuItem(event.currentTarget.id);
    return true;
};
Bootstrap.whenDocumentReady().then(
    function()
    {
        ko.applyBindings(new EmployeesViewModel, document.getElementById('menubutton-container'));
    }
);

【问题讨论】：

oj-menu-button 开始标签在哪里
你想做什么动作？现在你只是在更新 selectedMenuItem，所以你不会在视觉上看到任何东西

标签： javascript oracle-jet

【解决方案1】：

首先，oj-option 没有结束标记，oj-menu-button 没有开始标记。 currentTarget.id 它将引用 oj-menu。

下面的html和js可以正常工作

  <div id='menubutton-container'>
  <oj-menu-button>      
      <oj-menu id="myMenu" slot="menu" style="display:none" on-oj-action="[[menuItemAction]]">
          <oj-option id="ac" value="Additional Compensation" >
              <span class="demo-icon-font demo-fire-icon-24" slot="startIcon">MyLink</span>
          </oj-option>  
      </oj-menu>
  </oj-menu-button>

            self.selectedMenuItem = ko.observable("(None selected yet)");
            self.menuItemAction = function (event)
            {
                console.log(event.currentTarget);
                console.log(event.currentTarget.id);
                console.log(event.target.value);
                self.selectedMenuItem(event.target.value);
                return true;
            };

【讨论】：