OracleJet Splitbutton获取select事件值

时间:2016-08-01 13:41:08

标签: knockout.js split-button oracle-jet

使用Oraclejet框架,我试图制作一个只有2个选项的分割按钮。我如何区分它们以便每个人都能发挥自己的作用?或者如何粘贴所选文本作为参数?

就是这样的

<div id="dialogWrapper" style="position:relative; max-height:1%; max-width:1%;">
 <button id="printPdf" style="margin-right:6px;"data-bind="
                        ojComponent: {component: 'ojButton',            
                                      menu:'#choices'
                                      }"/>

里面的菜单:

 <ul id="choices" style="display:none"
      data-bind="ojComponent: {component: 'ojMenu', select: print//here both of them call to same function}">
 <li id="PDF">
         a href="#"><span class=""></span>PDF</a>
        </li>
        <li id="Excel">
        <a href="#"><span class=""></span>Excel</a>
     </li>     
  </ul> 
 </div> 

1 个答案:

答案 0 :(得分:1)

这是通过使用选择处理函数的一些参数来完成的:

我重新创建了上面的示例并测试了此代码:

<div id="dialogWrapper" style="position:relative; max-height:1%; max-width:1%;">
 <button id="printPdf" style="margin-right:6px;"data-bind="
                        ojComponent: {component: 'ojButton',            
                                      menu:'#printOptionsList',
                                      label: 'Print Option'
                                      }"/>
 <ul id="printOptionsList" style="display:none"
      data-bind="ojComponent: {component: 'ojMenu', select:printOptionHandler}">
 <li id="selPdf"><a href="#"><span class="oj-menu-item"></span>PDF</a></li>
 <li id="selExcel"><a href="#"><span class="oj-menu-item"></span>Excel</a>
     </li>     
  </ul> 
 </div> 

对于脚本部分,我已将printOptionHandler添加到主要淘汰对象:

self.printOptionHandler = function(event,ui){
            var sel = ui.item.children("a").text();
            //alert('option selected: ' + sel);
            if (sel == "Excel") {
                alert("calling Excel function");
            } else if (sel == "PDF"){
                alert ("calling PDF function");
            }
        };

这是否也会在您身边呈现所需的输出?