tridion - 如何为禁用文本框中更改的文本连接 Tridion GUI 扩展事件？

Question

我正在链接弹出窗口上实现 Tridion 2011 (GA) GUI 扩展(当您单击富文本区域中的超链接按钮时打开的扩展，以便您选择要链接到的组件或 url/邮寄等)。

我想 Hook 在此弹出窗口中选择或更新组件的点，以便我可以根据所选组件的架构加载一些数据。问题是包含组件 uri 的 html 输入字段被禁用(因为该值只能由选择器更改)，我认为这会阻止触发更改事件。

在我的扩展 js 中，我有以下内容，但是当我选择/更新组件时，仅当我更改 http/mailto 链接时才调用该函数

$evt.addEventHandler($("#FieldUrl"), "change", onFieldUrlChanged);

function onFieldUrlChanged()
{
    alert("url changed to: " + $("#FieldUrl").value);
}

还有其他可行的事件吗？否则，有什么方法可以 Hook 正在关闭的浏览弹出窗口吗？

更新

按照弗兰克的建议，我尝试 Hook “选择项目”弹出窗口中的事件。我现在已经为浏览按钮click 添加了一个事件处理程序，这又为弹出窗口添加了事件处理程序。我希望使用 insert 甚至 unload，然而令人烦恼的是，唯一触发的似乎是 close (只有当你这样做时才会发生不选择链接的组件，所以对我来说没有多大用处)。我的JS代码如下:

$evt.addEventHandler($("#BtnBrowse"), "click", onBtnBrowseClicked);
function onBtnBrowseClicked = function (event)
{
    var popup = $display.getView().properties.ItemPopup;
    $evt.addEventHandler(popup, "load", function () { alert('loaded'); });
    $evt.addEventHandler(popup, "insert", function () { alert('insert'); });
    $evt.addEventHandler(popup, "close", function () { alert('close'); });
    $evt.addEventHandler(popup, "unload", function () { alert('unload'); });
}

使用控制台，我确实设法将 click 事件挂接到弹出窗口中的实际插入按钮中，如下所示:

$evt.addEventHandler($display.getView().properties.ItemPopup.properties.view.properties.controls.insertButton, "click", function () { alert('stone the crows'); });

但是，如果我将其添加到浏览单击事件处理程序中，则会出现错误，因为 $display.getView().properties.ItemPopup.properties.view 为 null，可能是因为弹出窗口尚未完全加载(正如刚才所示，加载事件不起作用，所以我不知道如何等待它加载!)。

Answer 1

您可能需要监听每个弹出窗口触发的 submit 事件，而不是您现在正在监听的 change 事件。

change 事件是一个标准 HTML 事件，因此受到随之而来的所有常见规则的约束(例如，它显然不会针对禁用的控件触发)。

另一方面，submit 事件是自定义 Tridion 事件。尽管不幸的是，这意味着它的文档较少，但它确实具有巨大的优势，我们可以简单地阅读 JavaScript 代码来查看它何时/如何触发以及如何 Hook 它。

我会看看是否可以为您写一个小例子，但同时看看 Nuno 的这个问题(和答案):Anguilla - Updating a field's value from a popup? .

如果您想响应超链接弹出窗口本身中的组件选择，请查看 Link.js 内部，您会看到它为 insert 注册了自己> 项目选择弹出事件。

$evt.addEventHandler(p.ItemPopup, "insert",
                     function Link$_onBrowseClicked$onPopupSubmitted(event)

对于那些跟踪的人来说，到那时你就会看到这样的弹出窗口链:

> Dashboard > Edit Component > Insert Hyperlink > Select Item

更新

我发现您正按照我的建议转向 Hook insert。当我尝试这样做时，我也无法从超链接弹出窗口中捕获 insert 事件。

但是，如果我从“项目选择弹出窗口”本身内部注册处理程序，它确实会触发:

$evt.addEventHandler($display.getView(), "insert", 
                     function() { alert('event fired in item selector'); });

如果这确实是 Hook 它的唯一方法(我会进一步查看，但不知道会发现什么)，那么您应该简单地将脚本文件加载到所有弹出窗口中，并在 View 完成后注册处理程序完全加载:

$evt.addEventHandler($display, "start", function () {
    $evt.removeEventHandler($display, "start", onDisplayStarted);

    if ($display.getView().getId() == "ItemSelectDialogView") {
        // we're in an Item select popup -> listen for the insert event
        $evt.addEventHandler($display.getView(), "insert", onItemInserted);
    }
}

function onItemInserted(e) {
    $evt.removeEventHandler($display.getView(), "insert", onItemInserted);
    var items = e.data.items;
    ...

如您所见，我们在注册 insert 事件之前监听 $display 上的 start 事件，以确保 View 已正确加载处理程序。不要忘记删除此类事件处理程序，否则稍后您将遇到重新输入问题。