Question

我正在向身体添加一个模板，这在jquery mobile中呈现得很好。但是，然后我遍历数据并渲染单个视图 - 现在jquery mobile失败了..

最初我使用listview（“刷新”），但是我收到此错误，“ jquerymobile错误”无法在初始化之前调用listview上的方法“在循环遍历全新视图时...实现触发器（“创建”）似乎也无法在我说的任何地方工作......也许我错了，如果可以的话你能告诉我把它放在哪里，或解释如何解决这个问题......

另一个问题建议这样做......但我不确定在哪里放置它，如果它有效：

$('#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

我认为，每次在listview中运行render方法时，您可能会消灭FavouritesListView。每次创建新<ul>时，都必须重新触发create。理想情况下，您可以保留ul元素，并在li完成时仅替换内部fetch元素。然后在他们被困在那里时$('#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(...)等效的短语，可以更好地使用。

Backbone jquery移动渲染 - 在CoffeeScript中

1 个答案: