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

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

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

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

this.selectedSlot=ko.observable（“设置”）

好啊
取消
添加选项卡






可移动
主页内容区
工具区
基本选项卡


上次选择的列表项：

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

require（['ojs/ojcontext'，
“淘汰赛”，
“ojs/OJSbootstrap”，
“ojs/OjarayDataProvider”，
“ojs/ojs淘汰赛”，
“ojs/ojs导航列表”，
“ojs/ojs传送带”，
“ojs/ojs对话框”，
“ojs/ojs按钮”，
“ojs/ojs输入文本”，
“ojs/ojformlayout”，
“ojs/ojswitcher”，
],
函数（Context、ko、Bootstrap、ArrayDataProvider）{//当加载所有必需的模块时，将执行此回调
函数ViewModel（）{
this.data=ko.observearray([{
名称：'设置'，
id:“设置”
},
{
名称：“工具”，
id:“工具”
},
{
名称：'Base'，
id:'基地'
}
]);
this.selectedSlot=ko.observable（'settings'）；//单独提及以显示目标是什么
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=（函数（id）{
var hnavlist=document.getElementById（'hnavlist'）；
var items=this.data（）；
对于（变量i=0；i

从JET cookbook中抄袭时，理解起来有点复杂。你几乎把每件事都做对了。只需进行以下更改：

1）删除此项：

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

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

2）用define替换require 为什么？Require块再次在main.js中维护，您所需的模块在那里预加载。所有后续视图模型都具有“定义块”

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

---

您希望通过此功能实现什么功能？

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