Backbone.Marionette.ItemView渲染后元素没有准备好？

Question

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

例如,我有:

模板:

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

ItemView控件:

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

出乎意料的是,记录到控制台的对象不包含input元素.选择器不起作用.这是为什么？

在木偶的GitHub上的微小的代码块内部的意见在这里提到了"操纵el在这里.它已经被呈现,是一部充满视图的HTML的,蓄势待发." 除非我误解了这一点,否则我认为该模板将被渲染并准备在ItemView的onRender函数内操作.

Answer 1

您需要将 jQuery 选择器的范围限制在视图中，因为 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 中。但这是一个坏主意，因为它允许选择器在页面中查找具有指定查询的所有元素，而不仅仅是此特定视图实例的元素。通过使用，您可以将 jQuery 选择器的范围限定到视图实例，并且即使视图尚未添加到 DOM，也@$("#searchBox")能够在视图中找到元素。$el