Backbone.js：モデル、コレクション、ルーター、いつ、そしてなぜ？

Question

私はまだBackbone.jsの周りに頭を抱えようとしています 私はいくつかのスクリーンキャストを見て、チュートリアルを読んできました。私もRTFM。しかし、私は、誰もがどのように異なるタスクを処理するためにフレームワークの一部を使用するように思われるか少し混乱しています。

私は、本物のアプリでbackbone.jsで私の最初のショットを作ることを決めました。伝統的なtodoリストアプリで遊んだ後です。

私のアプリは質問でいっぱいのJSONオブジェクトを受け取ります。そして、私はそれらの質問（次のq、前のq）の周りを動かすことができる 'ul'を持っているのが好きです。私は既にボタンを表示し、ユーザーが '次へ'または '前'をクリックするたびに通知するビューを持っています。私の質問は、「currentQuestion」、「next」、「previous」の機能のロジックをどこで扱うべきかです。私はこのためにCollectionを使っている人やModelを使っている人がいるのを見たことがあります。それは私を混乱させます。

これを処理するには、誰でも私にいくつかのメタコードを指摘できますか？どうもありがとう！

Answer 1

実際にこの質問に対する正解はありません。確かにそれを動作させるための方法は複数あり、それはBackbonejsの素晴らしい点の1つです。非常に柔軟性があり、あまりにも多くのデザインを選択する必要はありません。私はあなたが記述しているものを構築を開始した場合

、私は確かだろう。

• Questionモデル
• Questionsコレクション
• 単一の質問をレンダリングするためのQuestionView
• 質問のリストを表示するためのQuestionsIndexView

その後、状況が少しばかげてしまい、アプリケーションの要件によって異なります。あなたは状態が伝統的なウェブサイトのように保存することがしたい場合は、ルーターを使用して、次のようになります何かをするかもしれません。

ApplicationRouter = Backbone.Router.extend({ 

    routes: { 
     "": "index", 
     "question/:id": "show" 
    }, 

    index: function() { 
     // render a QuestionsIndexView... 
    }, 

    show: function(id) { 
     // find the q and render a QuestionView... 
    } 
}) 

、ユーザがブラウザを使用することができますので状態はURLで維持されているので、これはいいですfwdと戻るボタンと物事はおそらく彼らが期待するように動作します。この問題は、nextQuestionとpreviousQuestionボタンをどのように機能させるのでしょうか？

あなたがそれらをQuestionViewの一部にする場合、質問はその次と前の質問のIDが何であるかを知る必要があります。この作業を行うスキームを考え出すこともできますが、よりエレガントで頻繁に使用されるパターンは、すでに言及したすべてのデータモデルの上に存在する別のモデルを作成してQuestionsCollectionとcurrent_question_idの属性にすることですモデル。次に、ルータのメソッドでこのcurrent_question_id attrを更新します。

私たちは本当に調理しています。アプリケーションの状態は、ブラウザのURLに保持されているだけでなく、アプリケーションレイヤでも観察可能なオブジェクトとして存在します。 ButtonsPanelViewを簡単に作成すると、このAppモデルが渡され、ボタンがクリックされたときに正しいルートがトリガーされます。 モデルにhasNextQuestionとhasPreviousQuestionを実装し、それをtoggleに使用するか、ユーザーが前後に移動できないときにそれぞれのボタンを無効にすることも自明です。要求されたよう

EDIT：

他のすべての上に存在するAppモデルを作ることは非常に簡単です。あなたはおそらくすでにこのようになりますどこかのコードを持っている：

window._qs = new Questions(); 
window._qs.fetch(); 

はただ、代わりにこれを行う：今Questionsコレクションは、我々が望んでいたのと同様に、アプリモデルの属性である

var qs = new Questions(); 
window.app = new App({questions: qs}); 
qs.fetch(); 

を。では、Appの定義はどうなっていますか？繰り返しますが、これについては多くの方法がありますが、私はBackbone.Models's validateを使用して、悪い状態になっていないことを確認します。ここに私がすることがあります：

App = Backbone.Model.extend({ 

    defaults: { 
     current_question_index: 0 
    }, 

    validate: function(attrs) { 

     if(typeof attrs.current_question_index !== "undefined") { 
     // we are trying the change the question index, 
     // so make sure it is valid 
     var len = this.get("questions").length 
     if(attrs.current_question_index < 0 || attrs.current_question_index >= len) { 
      // returning anything prevents invalid set 
      return "index is out of bounds"; 
     } 
     } 
    }, 

    hasNextQ: function() { 
     var next_ind = this.get("current_question_index") + 1; 
     // use the logic we already created, in validate() but 
     // convert it to a bool. NOTE in javascript: 
     //  !"stuff" === false 
     //  !undefined === true 
     return !this.validate({current_question_index: next_ind}); 
    }, 

    nextQ: function() { 
     var next_ind = this.get("current_question_index") + 1; 
     // validate() will prevent us from setting an invalid index 
     return this.set("current_question_index", next_ind); 

    } 

}); 

Answer 2

私がBackboneJSで理解したように、「モデル」はデータの単位です。例えば、「へ-DO項目」の単位データが含まれます

• 日付を
• メッセージ
• データのこれらのユニット

がに格納されている状態」コレクション"。それらは「行」を含む「データベース表」と同義です。しかし、モデルデータは行のように2次元に限定されません。その後、バックボーンの「ビュー」はロジックを行い、インターフェイスと対話します。たとえば、「ビューコントローラ」のようになります。ビューには、イベントハンドラ、要素の追加と削除、インターフェイスの変更などのコードが含まれています。