【问题标题】:In YUI, is there a way to reference the tab or tabview objects from the DOM?在 YUI 中,有没有办法从 DOM 中引用选项卡或选项卡视图对象?
【发布时间】:2009-06-10 00:27:15
【问题描述】:

似乎应该有,但我查看了 API 和 nada。我看不出它在 2.x 中是如何完成的。目前,我通过 jQuery 的 data method 存储对 tab and tabview 对象的元素引用。

原因:当我通过鼠标悬停和点击与选项卡交互时,我需要能够引用 YUI 选项卡/选项卡视图对象的属性和方法。由于我使用的是事件委托 b/c,因此我有很多选项卡(选项卡中的选项卡),我没有直接附加(可能有数百个)事件侦听器,因此我无法通过this 符号。

按钮有相应的方法 (YAHOO.widget.Button.getButton),但标签没有相应的方法,除非我遗漏了一些明显的东西。

此外,如果我有一个选项卡对象,似乎没有对选项卡视图的引用。再一次,我创建了自己的引用,但我认为应该已经有了引用或访问器方法。

任何人都可以对此有所了解吗?还有其他人对此有不同的看法吗?

【问题讨论】:

    标签: javascript jquery dom yui reference


    【解决方案1】:

    YUI 问题的最佳去处是 yuilibrary.com 上的论坛。

    YUI TabView 组件具有内置的事件委托。每个 Tab 事件实际上都由它所属的 TabView 处理。每个事件都被路由到相应的选项卡,并且处理程序的上下文设置为选项卡。

    这允许您像往常一样分配您的听众:

    tabview.getTab(1).on('mouseover', function(e) { console.log(e.target.innerHTML); // e.target === 标签标签元素 console.log(this.get('label')); // this === 选项卡实例 });

    这也适用于嵌套的 TabView。

    目前除了 TabView 的“tabs”属性外,Tab 和 TabView 之间没有绑定。您可以迭代此集合并将您的元素与每个 Tab 的“元素”属性进行比较,如果有用于知道它属于哪个 TabView 的用例。

    【讨论】:

    • 嗨,马特,欢迎来到 SO!我看过/听过你的一些 YUI 演讲。他们真棒!我是 YUI 库的忠实粉丝。但是,我认为我们中的许多人发现与传统论坛相比具有革命性。我去过 yuilibrary 论坛和#yui 都发现它们缺乏。例如,尝试在论坛上搜索“tabview”。 29 个结果超过 3 页。 (垂直间距也是怎么回事?)第一页半是一个主题。我不知道它们有多少实际结果。现在尝试使用“事件”进行过滤。令人沮丧。这种挫败感促使人们寻求替代方案。
    • 至于您的回答,jQuery 的实时文档 docs.jquery.com/Events/live 为整个文档的每种事件类型提供了一个侦听器。它非常有用,并且改变了我编写 Web 应用程序的方式。感谢您对数据绑定的确认,再次表达我对 YUI 的感激之情。
    【解决方案2】:

    您是否尝试过使用 Firebug,使用 DOM 选项卡/DOM 子面板,并实际查看文档和/或相关元素的属性/属性/方法?这通常是查看您可以访问的内容的最快方式。

    如果您不确定什么是可用的并且无法通过 firebug 获取该信息,那么也值得做一个 for..in 循环来枚举返回对象的所有属性/方法。

    例如

    var properties = "";
    for (prop in obj) {
        properties += prop+"\n";
    }
    alert(properties);
    

    在大多数情况下都是如此,而不仅仅是您的特定问题。

    编辑 刚刚检查了 tabview 的 YUI 示例,我发现 DOM 元素上没有属性,用于引用 JS 对象的选项卡。我想这样做是为了避免 DOM 污染,但看起来您在创建选项卡/选项卡视图时可能必须自己进行这些引用

    例如

    var tabView = new YAHOO.widget.TabView('demo');
    document.getElementById("demo").tabView = tabView;
    

    【讨论】:

    • 是的,我使用 firebug 来检查 DOM 元素,但我认为 YUI 不会添加到元素的属性/方法中。为了清楚起见,我有 DOM 元素,我想回到 yui 对象。我可以通过 API 从一个对象转到另一个元素,但反之则不行。您的建议意味着 yui 将新方法或属性直接附加到 DOM 元素。
    • 查看我的编辑。 yui 不会修改 DOM 元素的属性,但 you 可以。创建 YUI 选项卡视图时,如果您稍后需要从 DOM 中引用它,请自行添加该属性
    • 我知道我可以。请参阅我的问题,第 2 行。我认为数据方法更干净。我希望 YUI 专家通过类似于我提到的 getButton 方法的 API 知道更好/更清洁的方法。此外,虽然看起来确实没有办法从选项卡元素中获取选项卡对象,但我仍然不确定为什么/如果 yui 不会创建从选项卡对象到选项卡视图对象的引用或访问器,但它看起来像案子。
    猜你喜欢
    • 1970-01-01
    • 2012-02-15
    • 2015-06-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-05-15
    • 1970-01-01
    • 2015-09-18
    相关资源
    最近更新 更多