将 Oracle jet 切换器插槽动态绑定到 oracle jet 添加和删除选项卡（使切换器插槽在 oracle jet 中动态化）

Question

我想让选项卡切换器自动决定切换器的插槽，但是当我试图借助可观察的帮助使其动态化时，在我静态写入插槽区域之前，没有数据显示选项卡内容区域。使用 observable 变量，slot 没有获得选定的 Slot 值。

请检查我如何做到这一点。

slot = [[selectedSlot]] //用于html中的slot值

this.selectedSlot = ko.observable('settings');

<div id="tabbardemo">
 <oj-dialog class="tab-dialog hidden" id="tabDialog" dialog-title="Tab data">
              <div slot="body">
                <oj-form-layout>
                  <oj-input-text id="t1" value="{{newTabTitle}}" label-hint="Title"></oj-input-text>
                </oj-form-layout>
              </div>
          
              <div slot="footer">
                <oj-button id="idOK" on-oj-action="[[addTab]]">OK</oj-button>
                <oj-button id="idCancel" on-oj-action="[[closeDialog]]">Cancel</oj-button>
              </div>
            </oj-dialog>
          
            <oj-button id="addTab" on-oj-action="[[openDialog]]">Add Tab</oj-button>
            <br/>
            <br/>
          
            <oj-tab-bar contextmenu="tabmenu" id="hnavlist" selection="{{selectedItem}}" current-item="{{currentItem}}" edge="top" data="[[dataProvider]]"
              on-oj-remove="[[onRemove]]">
              <template slot="itemTemplate" data-oj-as="item">
                <li class="oj-removable" :class="[[{'oj-disabled' : item.data.disabled}]]">
                  <a href="#">
                    <oj-bind-text value="[[item.data.name]]"></oj-bind-text>
                  </a>
                </li>
              </template>
              <oj-menu slot="contextMenu" class="hidden" aria-label="Actions">
                <oj-option data-oj-command="oj-tabbar-remove">
                  Removable
                </oj-option>
              </oj-menu>
            </oj-tab-bar>
            
             <oj-switcher value="[[selectedItem]]">
                <div slot="[[selectedSlot]]"
                     id="home-tab-panel"
                     role="tabpanel" 
                     aria-labelledby="home-tab">
                  <div class="demo-tab-content-style">
                    <h2>Home page content area</h2>
                  </div>
                </div>
                <div slot="tools"
                          id="tools-tab-panel"
                          role="tabpanel" 
                          aria-labelledby="tools-tab">
                  <div class="demo-tab-content-style">
                    <h1>Tools Area</h1>
                    </div>
                  </div>  

                <div slot="base"
                     id="base-tab-panel"
                     role="tabpanel" 
                     aria-labelledby="ba`enter code here`se-tab">
                  <div class="demo-tab-content-style">
                    <h1>Base Tab</h1>
                    </div>
                  </div>
              </oj-switcher>
          
            <br>
            <div>
              <p class="bold">Last selected list item:
                <span id="results">
                  <oj-bind-text value="[[selectedItem]]"></oj-bind-text>
                </span>
              </p>
            </div>
          </div>

JS代码如下

require(['ojs/ojcontext',
      'knockout',
      'ojs/ojbootstrap',
      'ojs/ojarraydataprovider',
      'ojs/ojknockout',
      'ojs/ojnavigationlist',
      'ojs/ojconveyorbelt',
      'ojs/ojdialog',
      'ojs/ojbutton',
      'ojs/ojinputtext',
      'ojs/ojformlayout',
      'ojs/ojswitcher',
    ],
      function (Context, ko, Bootstrap, ArrayDataProvider) { // this callback gets executed when all required modules are loaded
        function ViewModel() {
          this.data = ko.observableArray([{
            name: 'Settings',
            id: 'settings'
          },
          {
            name: 'Tools',
            id: 'tools'
          },
          {
            name: 'Base',
            id: 'base'
          }
                                         ]);
          this.selectedSlot = ko.observable('settings'); //Sepecifically mentioned to show what it is the objective
          
          this.dataProvider = new ArrayDataProvider(this.data, { keyAttributes: 'id' });
          this.selectedItem = ko.observable('settings');
          this.currentItem = ko.observable();
          this.tabCount = 0;
          this.newTabTitle = ko.observable();
  
          this.delete = (function (id) {
            var hnavlist = document.getElementById('hnavlist');
            var items = this.data();
            for (var i = 0; i < items.length; i++) {
              if (items[i].id === id) {
                this.data.splice(i, 1);
                Context.getContext(hnavlist)
                  .getBusyContext()
                  .whenReady()
                  .then(function () {
                    hnavlist.focus();
                  });
                break;
              }
            }
          }).bind(this);
  
          this.onRemove = (function (event) {
            this.delete(event.detail.key);
            event.preventDefault();
            event.stopPropagation();
          }).bind(this);
  
          this.openDialog = (function () {
            this.tabCount += 1;
  
            this.newTabTitle('Tab ' + this.tabCount);
            document.getElementById('tabDialog').open();
          }).bind(this);
  
          this.closeDialog = function () {
            document.getElementById('tabDialog').close();
          };
  
          this.addTab = (function () {
            var title = this.newTabTitle();
            var tabid = 'tid' + this.tabCount;
            this.data.push({
              name: title,
              id: tabid
            });
            this.closeDialog();
          }).bind(this);
        }
  
        Bootstrap.whenDocumentReady().then(function () {
          ko.applyBindings(new ViewModel(), document.getElementById('tabbardemo'));
        });
      }
    );

Answer 1

当您从 JET 食谱中复制时，理解起来有点复杂。你几乎做对了所有事情。只需进行以下更改：

1) 删除这个：

Bootstrap.whenDocumentReady().then(function () {
          ko.applyBindings(new ViewModel(), document.getElementById('tabbardemo'));
        });

为什么？每个应用程序都需要引导一次，这是在您的 main.js 文件中完成的。

2) 用定义替换require 为什么？ Require 块再次在 main.js 中维护，您需要的模块已预先加载。所有后续的 viewModel 都有定义块

3) 返回 ViewModel 的实例

define([
... Your imports
],
function (Context, ko, Bootstrap, ArrayDataProvider) { // this callback gets executed when all required modules are loaded
  function ViewModel() {
        // Your code
   }
   return ViewModel;
});