1

现在，我将事件绑定到自定义标记的呈现内容的父元素，然后使用类将事件定位到自定义标记实际呈现的元素上。我觉得这可能会导致奇怪的错误。例如，如果我的团队中的任何人将使用相同定位类的两个自定义标签放置在同一个直接父元素下，则会导致触发多个事件，并与错误的元素相关联。

这是我现在使用的代码示例：

$.views.tags({
    toggleProp: {
        template: '<span class="toggle">{{include tmpl=#content/}}</span>',
        onAfterLink: function () {
            var prop = this.tagCtx.view.data;
            $(this.parentElem).on('click', '.toggle', function () {
                prop.value(!prop.value());
            });
        },
        onDispose: function () {
            $(this.parentElem).off('click', '.toggle');
        }
    }
    // ... other custom tags simply follow the same pattern ...
});

当我们点击时onAfterLink，是否有任何可靠的方法来访问与自定义标签本身相对应的渲染 DOM 元素（或 DOM 元素）？没有误击错误元素的风险？我知道自定义标签可能是没有 HTML 元素的文本，但它仍然是一个文本节点，对吧？（我什至可以将事件绑定到文本节点吗？）

在其他地方，并使用（远）旧版本的 JsViews，我在渲染后使用（有时很多）内置在渲染元素中的目标逻辑作为data-属性绑定了事件。这不仅是一种比我喜欢访问渲染数据的方法更脆弱的方法，而且尝试将这种方法应用于我们的一些深度嵌套和集合的模板将是非常冒险和复杂的。

我也不喜欢插入span带有我的自定义标签的 a ，这样我就可以对其应用类，但如果事件仍然需要它，我会应付的。

那么，我问，将事件绑定到 DOM 以便我也可以访问直接针对这些元素呈现的数据的安全、模块化方式是什么？

编辑：作为一个额外的问题，使用onAfterLink不会让我将事件绑定到非数据链接的呈现内容。这可能是 JsViews 与纯 JsRender 的设计意图的一部分，但我还不明白为什么会这样。

4

1 回答 1

1

而不是使用 this.parentElem，您可以使用

this.contents()

这是一个 jQuery 对象，包含标签内的所有直接内容元素。

您还可以提供选择器参数，

this.contents("someselector")

到 "filter" ，并在 "filter" 和 "find" 中包含一个可选的布尔 "deep" 标志 - 即

this.contents("someselector", true).

使用上述 API 可确保您只获取标签内容中实际存在的元素。

您可能不需要删除 onDispose 中的处理程序，如果标签仅连同其内容一起被删除，您可以依赖 jQuery 将在从 DOM 中删除元素时释放处理程序的事实。

您只能将事件附加到元素，而不是文本节点。因此，如果您的内容不包含元素，则需要添加包装元素，否则不需要。

$.views.tags({
    toggleProp: {
        template: '{{include tmpl=#content/}}',
        onAfterLink: function () {
            var prop = this.tagCtx.view.data;
            this.contents().on('click', function () {
                prop.value(!prop.value());
            });
        },
        onDispose: function () {
            this.contents().off('click');
        }
    }
});

还可以查看使用上述方法的示例，例如http://www.jsviews.com/#samples/tagcontrols/tabs 。

于 2013-06-26T19:32:03.203 回答