0

下面是 Ojet 组件，我想将 OJet 组件中的“p_id”传递给菜单中的“contextMenuItemSelect”函数。

ui.item.children("a").text() 能够获取所选选项，但我想获取相应列表项的 p_id 并根据所选选项导航到编辑或查看。

如何才能做到这一点？？

欧捷组件

        <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();
  }
4

1 回答 1

0

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

于 2016-09-21T05:55:00.523 回答