Question

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

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

$.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，这样我就可以为其应用课程，但如果它仍然是活动的必要条件，我就是＆＃39 ;应对。

然后，我问，将事件绑定到DOM的安全，模块化方式是什么，这样我才能访问直接针对这些元素呈现的数据？

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

Answer 1

您可以使用

，而不是使用this.parentElem

this.contents()

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

您还可以提供选择器参数

this.contents("someselector")

到“过滤器”，并在“过滤器”和“查找”中包含一个可选的布尔“深”标志 - 即

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等示例。

我应该如何将事件绑定到使用JsRender自定义标记创建的DOM元素？

1 个答案: