Question

下面是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();
  }

Answer 1

有一个工作代码来尝试它而不是这些片段会有所帮助，但我首先要做的是确保UL元素（具有ojMenu绑定）具有唯一的ID属性。从示例代码看起来所有菜单都共享相同的ID“myMenu2”。我不知道ojMenu是如何工作的，但如果它通过ID查找元素，这可能会导致麻烦（此外，当存在重复ID时，它不是有效的HTML代码）

我有一个List（ojListView），其中有一个上下文菜单（ojMenu）。如何将变量从列表传递到菜单选择功能。

1 个答案: