动态绑定Oracle jet开关槽到oracle jet添加和删除选项卡(在oracle jet中使开关槽动态)

Question

我想让制表符开关自动决定开关的插槽，但是当我试图在可观察的帮助下使它动态时，没有数据显示标签内容区域，直到我静态地写插槽区域。对于可观察的变量，时隙不会得到所选的时隙值。

请检查一下我怎么做的。

槽= [selectedSlot] //使用html中的时隙值

this.selectedSlot =ko.observable(“设置”)；

<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

当你从喷气式烹饪书中抄袭时，理解起来有点复杂。你几乎把一切都做对了。只需做以下更改：

1)删除以下内容：

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

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

2)用定义替换为什么？需要块再次在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;
});