将Oracle Jet切换器插槽动态绑定到oracle Jet的“添加和删除”选项卡在oracle jet中使切换器插槽动态

如何解决将Oracle Jet切换器插槽动态绑定到oracle Jet的“添加和删除”选项卡在oracle jet中使切换器插槽动态

我想让标签切换器自动确定切换器的插槽，但是当我尝试通过可观察的方式使其动态化时，直到我静态写入插槽区域为止，没有数据显示标签内容区域。使用可观察变量，该插槽未获得所选的插槽值。

请检查我该怎么做。

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

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'));
        });
      }
    );

解决方法

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

1) 删除此：

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

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

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

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