javascript - Backbone.Marionette.ItemView 渲染后元素未准备好？

Question

即使在 Backbone.Marionette.ItemView 的 onRender 方法中，我也无法访问元素。

例如，我有:

模板:

<input type="text" id="searchBox">`

项目 View :

View = Backbone.Marionette.ItemView.extend
    template: searchTemplate
    onRender:
        @setTypeahead ['a', 'b', 'c', 'd']
    setTypeahead: (valueArray) ->
        console.log $('#searchBox')
        $('#searchBox').typeahead
            source: valueArray

意外地，记录到控制台的对象不包含输入元素。选择器不起作用。这是为什么？

Marionette 的github 上小代码块内的评论here提到“在这里操作 el。它已经被渲染，并且充满了 View 的 HTML，可以开始了。”除非我误解了这一点，否则我认为模板将被渲染并准备好在 ItemView 的 onRender 函数内进行操作。

Answer 1

您需要将 jQuery 选择器的范围限定到 View ，因为 HTML 元素尚未添加到 DOM。

View = Backbone.Marionette.ItemView.extend
    template: searchTemplate
    onRender:
        @setTypeahead ['a', 'b', 'c', 'd']
    setTypeahead: (valueArray) ->
        console.log $('#searchBox')

        @$('#searchBox').typeahead
            source: valueArray

之所以使用 onShow 有效，是因为元素是在此时添加到 DOM 中的。但这是一个坏主意，因为它允许选择器在页面中找到所有具有指定查询的元素，而不仅仅是这个特定 View 实例的元素。通过使用 @$("#searchBox")，您可以将 jQuery 选择器的范围限定到 View 实例，并且能够在 View 的 $el 中找到元素，即使 View 尚未添加到 DOM。