Forum Stats

  • 3,770,276 Users
  • 2,253,087 Discussions
  • 7,875,382 Comments

Discussions

Nested oj-bind-for-each Menu Options

User_QH8O4
User_QH8O4 Member Posts: 2 Green Ribbon

I am trying to create dynamic menu options within the Masonry layout and can't seem to get it to work. (JET 7.2.0)

The oj-bind-text works outside of the menu:


However, inside the menu the oj-options are repeating the first iteration:


HTML Code:

<oj-masonry-layout id="masonryLayout">

        <oj-bind-for-each data="[[tableprovider]]" as ="tables">

         <template>

          <div :class="[[tables.data.sizeClass + ' oj-panel demo-tile']]">

           <oj-bind-text value="[[tables.data.name]]"></oj-bind-text>

              <oj-menu-button id="[[tables.data.menuId]]" chroming="half" display="icons">

                <span slot="startIcon" class="fa fa-cogs"></span>

                <span data-bind="text:[[tables.data.menuId]]"></span><!-- THE menuId STILL WORKS HERE-->

                <!-- ISSUE SEEMS TO BE ONCE WE GET INSIDE THE MENU -->

                <oj-menu id="button_"+"[[tables.data.menuId]]" slot="menu" style="display:none" display="dropDown" on-oj-action="[[callAction]]">

                 <oj-bind-text value="[[tables.data.menuId]]"></oj-bind-text><!-- WE ARE NOW STUCK ON THE FIRST ITERATION -->

                 <!-- FOR EACH INSIDE OF MENU / THIS ONE DOES NOT WORK-->

                 <oj-bind-for-each data="[[tables.data.menuOptions]]">

                  <template>

                   <oj-option id="[[$current.data.menuName]]" value="[[$current.data.menuValue]]" disabled=false>

                    <oj-bind-text value="[[$current.data.menuName]]"></oj-bind-text>

                   </oj-option>

                  </template>

                 </oj-bind-for-each>

                </oj-menu>

              </oj-menu-button>

              <!-- FOR EACH OUTSIDE OF MENU / THIS ONE WORKS -->

              <oj-bind-for-each data="[[tables.data.menuOptions]]" as="menuOptions">

               <template>

                 <br><br>

                 <oj-bind-text value="[[menuOptions.data.menuName]]"></oj-bind-text>

                 <br>

               </template>

              </oj-bind-for-each>

          </div>

         </template>

        </oj-bind-for-each>

       </oj-masonry-layout>

JS Code:

    var tables = [

     {

      name: app.getUiString('TABLE_1'),

      sizeClass: 'oj-masonrylayout-tile-1x1',

      menuId: 'menuId_Table_1',

      menuOptions: [{menuName: app.getUiString('MENU_1_OPTION_1'),

              menuValue: 'Menu_1_option_1'},

             {menuName: app.getUiString('MENU_1_OPTION_2'),

              menuValue: 'Menu_1_option_2'}]

     }, {

      name: app.getUiString('TABLE_2'),

      sizeClass: 'oj-masonrylayout-tile-1x1',

      menuId: 'menuId_Table_2',

      menuOptions: [{menuName: app.getUiString('MENU_2_OPTION_1'),

              menuValue: 'Menu_2_option_1'}]

     }, {

      name: app.getUiString('TABLE_3'),

      sizeClass: 'oj-masonrylayout-tile-1x1',

      menuId: 'menuId_Table_3',

      menuOptions: [{menuName: app.getUiString('MENU_3_OPTION_1'),

              menuValue: 'Menu_3_option_1'}]

     }];

    this.tableprovider = new ArrayDataProvider(tables, { keyAttributes: 'name'});


Any assistance would be greatly appreciated!!

Answers