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元素。选择器不起作用。那是为什么？

Marionette的github here上的小代码块内的注释提到“在这里操纵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。但这是一个坏主意，因为它允许选择器在页面中查找具有指定查询的所有元素，而不仅仅是该特定视图实例的元素。通过使用@$("#searchBox")，您可以将jQuery选择器限定为视图实例，并且即使视图尚未添加到DOM中，也能够在视图$el中找到该元素。

Answer 2

好的，当然，一旦我最终决定在这里问，我自己回答这个问题。

我应该使用onShow代替onRender。 Marionette文件似乎仍然具有误导性，IMO。

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

2 个答案: