2011-10-03 9 views
5

すべて、バックボーンJS再レンダリングはビューeventless

私はバックボーンJSでアプリをbuidlingていますし、私の方法論に従って最初のモデルならば、各なhashchangeの私のローカルストレージを更新するためにサーバに要求を発射していますが残さルックアップが古すぎます。

私はこれを扱っています。私は、第2の要求は、ページがちょうど再レンダリングに戻ったときことをレンダリングするためにモデルポインティングに変更イベントを結合したビューで

(hashchange) -> 
    fetch model -> 
    (if model expired [eg: grabbed from LS], fetch again in background) 
    render 

。あなたに

紳士と女性、私がなぜ最初のページには、すべてのイベントが動作ロードされたときに行います(クリックすると、そのような)が、ビューの再描画した場合、彼らはもうない頼みますか?

ビューのためにあなたを助けるためにいくつかのコードは、ネストされた要求にネストされたビューがあります:

class ShowView extends Backbone.View 
    template: +some template+ 
    initialize: -> 
    this.render() 
    @model.bind('change', this.render) 

    render: -> 
    $(@el).html(this.template(@model.toJSON()) 
    items = new ItemCollection 
    @model.set(items: items, {silent: true}) 
    @$items = new ItemsView(collection: items, el: @$('#posts')) 
    items.fetch() 
    +displayPage @el+ 
    @ 

class ItemsView extends Backbone.View 
    template: +some template+ 
    initialize: -> 
    @collection.bind('reset', this.render) 

    render: => 
    @collection.each((model) -> new ItemView(model: model)) 
    @ 

は...もう一つ、私は誓う...

class ItemView extends Backbone.View 
    template: +some template+ 
    events: 
    'click .inner': 'showItem' 

    initialize: -> 
    this.render() 

    render: -> 
    $(@el).html(this.template(@model.toJSON())) 
    @ 

のすべてこれは一般化されていますが、概念は同じです。その変更イベントが発生すると、すべてがリフレッシュされますと、私は.innerをクリックすると

、何も起こりません。

提案?また、私はすべてのレンダリングメソッドの最後にdelegateEventsに試してみましたが、バインド解除して、新しい前景色が行われたレンダリング削除しようとしています。

おかげ

--UPDATE--

ItemViewテンプレート:

<a class="inner"> 
    <img src="item/image.gif" /> 
    <h3><%= title %></h3> 
    <p><%= description %></p> 
</a> 

ItemViewでshowItem方法は、実際のアイテムに単純なリダイレクトである:

showItem: -> 
    window.location.hash = "#/posts/#{@model.id}/show" 

私はItemViewのtagNameをは「李」であることを言及するのを忘れてしまったとItemsView tagNameには、「UL」であり、ので、これはありませんすべてのページのリストを作成しています。

+2

ItemViewのテンプレートはどのようなものですか?また、ItemViewの 'showItem'メソッドはどのように見えますか? –

+1

jsFiddleを作成できますか? –

+0

私は今jsFiddleに取り組んでいますが、投稿は更新されています。 –

答えて

0

ので、ここでは、[OK]を、私はこの迷惑なバグを解決するためにやったことです:

Backbone.ViewはBackbone.Eventsからアンバインド方法が付属しています。

私が本質的に行うことは、作成したすべてのビューを追跡することです。異なるビューを作成したり、サムビューを再レンダリングすると、以前のすべてのビューがDOMからバインド解除されます。上記の私の例の場合

、ここに私のために動作するコードは次のとおりです。

class ShowView extends Backbone.View 
    template: +some template+ 
    initialize: -> 
    this.render() 
    @model.bind('change', this.render) 

    render: -> 
    $(@el).html(this.template(@model.toJSON()) 
    items = new ItemCollection 
    @model.set(items: items, {silent: true}) 
    @$items.unbind() if @$items    # for the subview events 
    items.fetch() 
    @$items = new ItemsView(collection: items, el: @$('#posts')) 
    this.delegateEvents()     # For the current view events 
    +displayPage @el+ 
    @ 

    unbind: -> 
     super 
     @$items.unbind() if @$items 

class ItemsView extends Backbone.View 
    template: +some template+ 
    initialize: -> 
    @collection.bind('reset', this.render) 

    render: => 
    @collection.each((model) -> new ItemView(model: model)) 
    this.delegateEvents()     # For the current view events 
    @ 

乾杯、 Cbarton

1

あなたのレンダリング機能では、このコードを配置:

this.delegateEvents(); 

hereの説明を読んでください。

関連する問題