骨干 jquery 移动渲染 - 在 CoffeeScript 中

Question

我在正文中附加了一个模板，这在 jquery mobile 中可以很好地呈现。但是，然后我循环遍历数据并呈现单个视图 - jquery mobile 现在失败了..

最初我使用 listview("refresh")，但是当循环一个全新的视图时，我得到了这个错误，“jquerymobile 错误“无法在初始化之前调用 listview 上的方法”......还有实现 trigger("create") 似乎在我放置它的任何地方都不起作用......也许我错了，如果是这样，你能告诉我把它放在哪里，或者解释如何解决这个问题......

另一个问题建议这样做......但我不确定将它放在哪里，以及它是否有效：

$('#myListview').bind('pageinit', function() {
  $('#myListview').listview('refresh');
});

我真的被卡住了.. 谁能解释一下如何解决这个问题，谢谢！

我的主要视图循环通过较小的视图是..

class FavouritesListView extends Backbone.View
    initialize: =>
        Favourites.fetch()

    template: _.template($('#propertyFavourites').html())

    render: =>
        $(@el).append(@template)
        @addFavs()

    addFavs: =>
        Favourites.each (fav) =>
            view = new FavouriteView({model: fav})
            $("#favList", @el).append(view.render().el)

            #I've tried $("#favList", @el).append(view.render().el).listview("refresh") & get "cannot call methods on listview prior to initialization".. I've also tried .trigger("create") which doesn't work..

我的列表项视图是（在没有样式的情况下呈现）...

class FavouriteView extends Backbone.View
    template: _.template($('#propertyFav').html())

    render: =>
        $(@el).html(@template({row: @model}))
        @

我的路由器和应用程序是这样加载的..

class AppRouter extends Backbone.Router
    routes:
        "": "home"
        "favourites": "favourites"

    initialize: ->
        #handle back buttons
        $('.back').live('click', (event) -> 
            window.history.back();
            false
        )
        @firstPage = true;

    home: ->
        @changePage(new HomeView())

    favourites: ->
        @changePage(new FavouritesListView())

    changePage: (page, theTransition) ->
        $(page.el).attr('data-role', 'page')
        page.render()
        $('body').append($(page.el))

        if theTransition is undefined
            transition = $.mobile.defaultPageTransition
        else
            transition = theTransition

        #We don't want the first page to slide in
        if @firstPage
            transition = 'none'
            @firstPage = false

        $.mobile.changePage($(page.el), {changeHash: false, transition: transition})


$(document).ready( ->
    AppRouter = new AppRouter()
    Backbone.history.start()
)

作为参考，我使用的是 jqm 1.2.0 Alpha...

任何帮助将不胜感激，谢谢

Answer 1

我认为每次在FavouritesListView 中运行render 方法时，您可能会清除您的listview。每次创建新的<ul> 时，都必须在其上重新触发create。理想情况下，您将保留 ul 元素，并且仅在完成 ​​fetch 后换掉内部的 li 元素。然后当他们被困在那里时执行$('#favList').listview('refresh')。

但是，这将需要一些重大的返工，因此，请尝试使用您现有的代码：

class FavouritesListView extends Backbone.View
    initialize: =>
        Favourites.fetch()

    template: _.template($('#propertyFavourites').html())

    render: =>
        @$el.append(@template)
        @addFavs()

    addFavs: =>
        # FYI: @$(...) is shorthand for this.$el.find(...)
        $favList = @$("#favList")
        Favourites.each (fav) =>
            view = new FavouriteView({model: fav})

            # TODO: batch these up and only do one append at the end for better performance.
            $favList.append(view.render().el)

        # Move this trigger out of the for loop, only trigger at the end.
        # Sometimes triggering create on the parent is better, not the actual list.
        @$el.trigger "create"

我还根据一些新的 Backbone 功能进行了一些调整，例如 this.$el === $(this.el) 和 this.$(...) === this.$el.find(...) 是更好用的等效速记。