Backbone jquery移動渲染 - 在CoffeeScript中

Question

我將模板附加到body，這在jquery mobile中呈現良好。然而，我再通過數據環路和渲染個人的觀點 - 在jQuery Mobile的現在失敗..

本來我使用列表視圖（「刷新」），但我得到這個錯誤，「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阿爾法...

任何幫助將非常感激，感謝

Answer 1

我想你可能是你的listview每次消滅運行在FavouritesListView的render方法。每當您創建新的<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" 

我還調整了基於一些新的骨幹功能，如this.$el === $(this.el)和this.$(...) === this.$el.find(...)被一些事情相當於使用更好的短手。