2012-03-19 2 views
1

私はGithubの特定のレポの問題のリストを表示する単純なアプリケーションを開発中です。以下は、問題のHTMLを生成し、DOMEmber JS:破壊されたオブジェクトのプロパティを確認

App.IssueView = Ember.View.extend({ 
    tagName: "li", 
    classNames: ["sugar", "issue_wrapper"], 
    templateName: "app/templates/issue", 
    init: function() { 
    App.LabelsController.addObserver("label", this, this.labelUpdated); 
    this._super(); 
    }, 
    click: function(event) { 
    var target = event.target; 

    if (target.className == "title") { 
     // Using bindingContext is a temporary solution to access data of this issue 
     App.IssuesController.set("issue", this.bindingContext); 
     App.IssuesController.set("state", "viewIssueDetails").notifyPropertyChange("state"); 
    } 
    }, 
    labelUpdated: function() { 
    this.labels = this.labels || this._collectLabels(), 
    label = App.LabelsController.get("label").name; 

    this.set("isVisible", this.labels.indexOf(label) != -1); 
    }, 
    _collectLabels: function() { 
    var labels = []; 

    this.bindingContext.labels.forEach(function(label) { labels.push(label.name) }); 

    return labels; 
    } 
}) 

に挿入IssueViewのコードは、私が持っていた問題は、この行で

App.LabelsController.addObserver("label", this, this.labelUpdated); 
である私はそれを生成する方法が

<script type="text/x-handlebars"> 
    {{#view App.IssuesListView}} 
    {{#each App.IssuesController}} 
     {{view App.IssueView contentBinding="this"}} 
    {{/each}} 
    {{/view}} 
</script> 

です

新しいIssueViewが生成されてDOMに挿入されるたびに、LabelsControllerの 'label'プロパティが更新されたときに「破棄されたオブジェクトには観察されたプロパティを設定できません」というエラーが表示されます。 Firebugを調べると、私のIssueViewの状態がinDOMの代わりに "破壊"されていることがわかりました。なぜそれが起こったのだろうと私はそれを回避するために何ができますか?

答えて

2

テンプレート内の#eachヘルパーは、問題のコレクションが変更されると、IssueViewsが作成され破棄されるようにします。オブザーバーを手動で追加しています。つまり、オブザーバーを削除する責任があります。私はobserves(...)関数のプロトタイプ拡張を使用するとあなたのためにそれを処理すると信じています。 (「プロパティの変更の観察」のhttp://ember-docs.herokuapp.com/symbols/Ember.Observable.htmlを参照)。

マニュアルルートを追求する場合は、addObserverをdidInsertElementに移動し、対応するremoveObserverをwillDestroyElementに追加することを検討してください。

このコードで正しく実行しようとしていることを理解している場合は、アプローチの代わりに選択したラベルに基づいて正しい問題のセットを提示するArrayControllerにバインドすることを検討します取っている。

+0

これは素晴らしいことです。私は手動のアプローチに行き、 'willDestroyElement'の中で 'removeObserver'を呼び出しました、そして、今働いているようです。 –

+0

あなたのサイドノートについては、まさに私がここでやっていることです。基本的に、 'labelUpdated'が呼び出されると、それぞれのissueViewはそれ自身に尋ねます: 'ねえ、私のラベルの1つを選んだラベルですか?'、そうでない場合はビューが隠されます。 –

+2

うまくいきました。私がサイドノートで提案している別の設計は、ラベルが更新され、配列コントローラ(例えば 'App.FilteredIssuesController')がコンテンツ配列を更新して適切な問題を追加/削除することです。テンプレート '#each'は' FilteredIssuesController'にバインドされ、コントローラのコンテンツ配列が変更されたときに自動的に更新されます。それはコードの削減とモデルとビューの分離の分離を意味します。ちょうど私の$ .02。 :) –

関連する問題