我正在向组件编辑屏幕添加一个新选项卡。我的选项卡显示正常,但未加载 JavaScript。我想在选项卡中写出当前组件的 URI。我有一种感觉,我的 JavaScript 方法的命名不正确或与配置不匹配,但真的不知道如何从 JavaScript 方面说“你好”。
我使用了 Tridion CME 的 InfoTab View (下面的代码示例)以及 PowerTools ItemXml 来获取灵感 - 但没有运气。
JS 中让 hello world 工作的最少方法集是什么?
解决方案
从 Rob 的建议中添加了依赖项节点。然后日志将 js 文件显示为正在加载。
HelloTab.js
Type.registerNamespace("RC");
RC.HelloTab = function RC$HelloTab$HelloTab(element) {
console.log('Constructor');
Tridion.OO.enableInterface(this, "RC.HelloTab");
this.addInterface("Tridion.Controls.DeckPage", [element]); //My extension is like this
};
RC.HelloTab.prototype.initialize = function HelloTab$initialize()
{
console.log('init');
$log.debug('init');
this.callBase("Tridion.Controls.DeckPage", "initialize");
$evt.addEventHandler($display.getItem(), "load", this.getDelegate(this.updateView));
};
RC.HelloTab.prototype.select = function HelloTab$select()
{
console.log('select');
this.callBase("Tridion.Controls.DeckPage", "select");
this.updateView();
};
RC.HelloTab.prototype.updateView = function HelloTab$updateView()
{
console.log('update');
if (this.isSelected())
{
console.log('selected')
}
};
Tridion.Controls.Deck.registerPageType(RC.HelloTab, "RC.HelloTab");
HelloTab.config
<?xml version="1.0"?>
<Configuration xmlns="http://www.sdltridion.com/2009/GUI/Configuration/Merge"
xmlns:cfg="http://www.sdltridion.com/2009/GUI/Configuration"
xmlns:ext="http://www.sdltridion.com/2009/GUI/extensions"
xmlns:cmenu="http://www.sdltridion.com/2009/GUI/extensions/ContextMenu">
<resources cache="true">
<cfg:filters />
<cfg:groups>
<cfg:group name="RC.HelloTab" merge="always">
<cfg:fileset>
<cfg:file type="script">/HelloTab.js</cfg:file>
</cfg:fileset>
<cfg:dependencies>
<cfg:dependency>Tridion.Web.UI.Editors.CME</cfg:dependency>
<cfg:dependency>Tridion.Web.UI.Editors.CME.commands</cfg:dependency>
</cfg:dependencies>
</cfg:group>
</cfg:groups>
</resources>
<definitionfiles />
<extensions>
<ext:dataextenders/>
<ext:editorextensions>
<ext:editorextension target="CME">
<ext:editurls/>
<ext:listdefinitions/>
<ext:taskbars/>
<ext:commands/>
<ext:commandextensions/>
<ext:contextmenus/>
<ext:lists />
<ext:tabpages>
<ext:add>
<ext:extension assignid="HelloTab" name="Hi There!" insertbefore="InfoTab">
<ext:control>~/HelloTab.ascx</ext:control>
<ext:pagetype>RC.HelloTab</ext:pagetype>
<ext:dependencies>
<cfg:dependency>RC.HelloTab</cfg:dependency>
</ext:dependencies>
<ext:apply>
<ext:view name="ComponentView">
<ext:control id="MasterTabControl"/>
</ext:view>
</ext:apply>
</ext:extension>
</ext:add>
</ext:tabpages>
<ext:toolbars/>
<ext:ribbontoolbars/>
</ext:editorextension>
</ext:editorextensions>
</extensions>
<commands/>
<contextmenus />
<localization />
<settings>
<defaultpage/><!-- /Views/Default.aspx</defaultpage> -->
<navigatorurl/><!-- /Views/Default.aspx</navigatorurl> -->
<editurls/>
<listdefinitions />
<itemicons/>
<theme>
<path>theme/</path>
</theme>
<customconfiguration />
</settings>
</Configuration>
原文:
HelloTab.config
<resources cache="true">
<cfg:filters />
<cfg:groups>
<cfg:group name="RC.HelloTab" merge="always">
<cfg:fileset>
<cfg:file type="style">{ThemePath}/HelloTab.css</cfg:file>
<cfg:file type="script">/HelloTab/HelloTab.js</cfg:file>
</cfg:fileset>
<cfg:dependencies>
<cfg:dependency>Tridion.Web.UI.Editors.CME</cfg:dependency>
<cfg:dependency>Tridion.Web.UI.Editors.CME.commands</cfg:dependency>
</cfg:dependencies>
</cfg:group>
</cfg:groups>
</resources>
<definitionfiles />
<extensions>
<ext:dataextenders/>
<ext:editorextensions>
<ext:editorextension target="CME">
<ext:editurls/>
<ext:listdefinitions/>
<ext:taskbars/>
<ext:commands/>
<ext:commandextensions/>
<ext:contextmenus/>
<ext:lists />
<ext:tabpages>
<ext:add>
<ext:extension assignid="HelloTab" name="Hi There!" insertbefore="InfoTab">
<ext:control>~/HelloTab.ascx</ext:control>
<ext:pagetype>HelloTab</ext:pagetype>
<ext:apply>
<ext:view name="ComponentView">
<ext:control id="MasterTabControl"/>
</ext:view>
</ext:apply>
</ext:extension>
</ext:add>
</ext:tabpages>
<ext:toolbars/>
<ext:ribbontoolbars/>
</ext:editorextension>
</ext:editorextensions>
</extensions>
<commands/>
<contextmenus />
<localization />
<settings>
<defaultpage/><!-- /Views/Default.aspx</defaultpage> -->
<navigatorurl/><!-- /Views/Default.aspx</navigatorurl> -->
<editurls/>
<listdefinitions />
<itemicons/>
<theme>
<path>theme/</path>
</theme>
<customconfiguration />
</settings>
JavaScript:
Type.registerNamespace("RC.HelloTab");
RC.HelloTab = function HelloTab(element)
{
Tridion.OO.enableInterface(this, "RC.HelloTab");
this.addInterface("Tridion.Controls.DeckPage", [element]);
};
RC.HelloTab.prototype.initialize = function HelloTab$initialize()
{
$log.event("RC.HelloTab", "RC.HelloTab init");
this.callBase("Tridion.Controls.DeckPage", "initialize");
document.write("something else");
var item = $display.getItem();
if (item)
{
if (item.isLoaded())
{
this._showInfo();
}
else
{
item.load();
}
}
};
RC.HelloTab.prototype.select = function HelloTab$select()
{
this.callBase("Tridion.Controls.DeckPage", "select");
if (this.properties.itemChanged)
{
this._showInfo();
this.properties.itemChanged = false;
}
};
RC.HelloTab.prototype._showInfo = function HelloTab$_showInfo()
{
var item = $display.getItem();
var html = "<h1>title</h1>";
$dom.setOuterHTML($("#title"), html);
document.write('another uri=' + item.ID);
};
RC.HelloTab.prototype._onItemChanged = function HelloTab$_onItemChanged()
{
if (this.isSelected())
{
this._showInfo();
}
};
Tridion.Controls.Deck.registerPageType(RC.HelloTab, "HelloTab");
Tridion.Web.Trace:
w3wp.exe 信息:0 : (634734775171817068) CachedJssControlResources:HelloTab 类型的 LastModifiedTime 是 5/24/2012 5:22:26 PM
w3wp.exe 信息:0 : (634734770029374585) CachedJssControlResources:类型 editors_hellotab_hellotab_ascx 的 LastModifiedTime 是 5/24/2012 5:22:26 PM
最佳答案
我认为您的问题是您缺少 ext:extension 元素中的依赖项元素。
<ext:dependencies>
<cfg:dependency></cfg:dependency>
</ext:dependencies>
像这样添加:
<ext:extension assignid="HelloTab" name="Hi There!" insertbefore="InfoTab">
<ext:control>~/HelloTab.ascx</ext:control>
<ext:pagetype>HelloTab</ext:pagetype>
<ext:dependencies>
<cfg:dependency>RC.HelloTab</cfg:dependency>
</ext:dependencies>
<ext:apply>
<ext:view name="ComponentView">
<ext:control id="MasterTabControl"/>
</ext:view>
</ext:apply>
</ext:extension>
如果您使用的是 Chrome,您可以将一些 console.log 语句(IE 时发出警报)放入您从界面实现的每个方法中作为测试,并位于文件顶部。例如。:
console.log('Hello: File loaded');
您的代码和我最近编写的 GUI 扩展之间的一个区别是您的构造函数名称不包含命名空间。
我希望它被称为:
RC.HelloTab = function RC$HelloTab$HelloTab(element)
{
console.log('Constructor');
Tridion.OO.enableInterface(this, "RC.HelloTab.HelloTab"); //Also was missing NS here
this.addInterface("Tridion.Controls.DeckPage", [element]); //My extension is like this
};
另一种检查方法是在您希望 Javascript 出现的页面上使用 Chrome 开发人员工具,转到脚本选项卡并使用开发人员工具中的搜索框搜索您的命名空间。
希望这可以帮助。
关于tridion - GUI 扩展 - TabPage 未加载 JS,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10740742/