0

以下をお願いしたいです。いくつかの問題と成績がある宿題があるとします。各問題には、いくつかの部分と難易度があります。各パーツには属性の正誤があります。

ネストされたモデルを介してそのロジックを実装したいと思います（または、実際にできることですが、これは私の最善の推測です）。したがって、正しいか間違っているかの属性を持つモデル「パーツ」が存在します。次に、問題と呼ばれるモデルがあり、それに関連付けられたいくつかの部分 (コレクション? これが可能かどうかはわかりません) と属性の難易度があります。次に、それに関連するいくつかの問題と属性グレードを持つモデルの宿題があります。

私の質問は：

これは可能ですか？もしそうなら、あなたの一般的なモデル作成の構文は何ですか? これをレンダリングするための構文は何ですか?

私はこのような一般的なものを探しています:

var Homework=Backbone.model.extend({
   defaults:{
     grade:100,
     parts: var parts=Backbone.model.extend({ .... //this definitely seems wrong });
     },
 });

var Homeworkview=Backbone.view.extend({
    initialize: function(){
    //create one question with one part
    },
    render: function(){
    //render template for homework grade then call function to render question, which then renders parts},
 });

では、どうやってこれを行うのですか？

4

1 に答える 1

1

これを行うには多くの方法があります。Backbone Layout Managerは、ネストされたモデルを処理する優れた慣用的な方法を提供しますが、小規模な (またはより専門的な) アプリケーションの場合は、独自の方法を作成したいと思うかもしれません。と の間の関係はaと a の間の関係HomeworkとProblem非常に似ているように見えるので、前者の間の関係を処理する 1 つの方法を次に示します。ProblemPart

モデルとコレクションを定義することから始めます。

var Problem = Backbone.Model.extend({
  // defaults, constructor, etc.
});

var ProblemCollection = Backbone.Model.extend({
  model: Problem
});

次に、「親」モデルには、一連の問題を追跡する何らかの方法が必要です。必要に応じてここにもう少し説明を書きましたが、一般的な考え方は次のようになります。

var Homework = Backbone.Model.extend({

  defaults:{
    grade:100,
    problems: []
  },

  initialize: function () {
    // initialize a collection of the "Problems" in this Homework
    this.problems = new ProblemCollection(this.get('parts'));
  }
});

次はビューです。子ビューは、任意のものにすることができます。

var ProblemView = Backbone.View.extend({
  tagName: 'li'
  // rendering, initializers, etc.
});

親ビューはおそらくもう少し複雑になります。モデル内にすべてのProblemモデルのコレクションが保存されているため、必要に応じてHomeworkモデルごとに新しいビューを作成できます。

var HomeworkView = Backbone.View.extend({

  render: function () {

    // create a container for problems
    var $problems = $('<ul class="problem-list"></ul>');

    // create a view for each problem
    this.model.problems.each(function (model) {
      var $problem = $('<li class="problem"></li>'),
          problemView = new ProblemView({
            model: model,
            el: el
          });
      $problems.append($problem);
    });

    this.$el.empty().append($problems);

    return this;
  }
});

うまくいけば、これが役に立ちます！

于 2012-07-24T06:13:49.973 に答える