9

私はどこでも答えを探しましたが、私が見つけたものに満足していませんでした.

問題は、Backbone で「Todo」アプリを作成するために Addy Osmani のチュートリアルを行っているのですが、コンソールを見ると、というエラーが表示されることthis.model is undefinedです。

私もこのSO answer Backbone model error displayed in consoleを試しましたが、それでも同じエラーが発生します。何が悪いのか教えてください。

ところで、this.modelまたはは何this.collectionですか？それらが参照しているアイデアがBackbone.ModelありBackbone.Collectionますが、どのように機能しますか? this.collection別のチュートリアルで とを明確に定義しthis.model.modelsたときに、 も未定義だったので、これを尋ねています。ModelCollection

どうもありがとう

JS:

//Model
var Todo = Backbone.Model.extend({

  defaults: {
    title: 'Enter title here',
    completed: true
  },

  validate: function(attrs) {
    if (attrs.title === undefined) {
        return 'Remember to enter a title';
    }
  },

  initialize: function() {
    console.log('This model has been initialized');

    this.on('change:title', function() {
        console.log('-Title values for this model have changed');
    });

    this.on('invalid', function(model, error) {
        console.log(error);
    });
  } 
});

//View
var TodoView = Backbone.View.extend({

  el: '#todo',
  tagName: 'li',
  template: _.template($('#todoTemplate').html()),

  events: {
    'dbclick label': 'edit',
    'click .edit': 'updateOnEnter',
    'blur .edit': 'close'
  },

  initialize: function() {
    _.bindAll(this, 'render');
            this.render();

  },

  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    this.input = this.$('.edit');
    console.log(this.model.toJSON());
    return this;
  },

  edit: function() {
    //do something...
  },

  close: function() {
    //do something...
  },

  updateOnEnter: function() {
    //do something...
  }
});

var todoview = new TodoView();
console.log(todoview.el);

//Collection
var TodoList = Backbone.Collection.extend({
  model: Todo
});
4

3 に答える 3

12

Modelorをインスタンス化Collectionしてビューに渡す必要があります。それ以外の場合、TodoView で render メソッドが呼び出されると、this.modelnull になります。

たとえば、コードの最後の数行を次のように並べ替えてみてください。

//Collection
var TodoList = Backbone.Collection.extend({
  model: Todo
});

var todos = new TodoList();

var todoview = new TodoView({model: todos});

その時点から、todos ( Collection) を変更でき、ビューは todos のイベントをリッスンし、それに応じて再レンダリングできます。

于 2013-02-14T01:37:49.290 に答える
4

他の質問の答えは、あなたの質問に対する答えです。ビューをインスタンス化するときにモデルをビューに渡していません。

var model = new Todo();
var todoview = new TodoView({model: model});

オブジェクトをビューのコンストラクターに渡すと、特定のキーが検索され、ビューに直接アタッチされます。

Backbone のソースを見て、を検索することで、どれを確認できますviewOptions。

これにより、this.modelとthis.collectionが自動的にビューの にアタッチされますthis。

于 2013-02-14T01:42:37.217 に答える
3

あなたは言いませんでしたが、あなたが得ているエラーは render() メソッドで発生していると思います。

あなたの問題は、新しいタイプのモデル ( var Todo = Backbone.Model.extend({...) を定義することですが、それをインスタンス化することも、モデルを todoview コンストラクターに渡すこともありません。

したがって、少なくとも次のことを行う必要があります。

var todomodel = new Todo();

var todoview = new TodoView({
    model: todomodel
});
于 2013-02-14T01:41:42.717 に答える