10

テンプレートに渡すことができるように、モデルの属性を JSON にレンダリングする必要があります。ビューの render() 関数は次のようになります。

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

console.log(this.model) を実行した後の属性出力は次のとおりです。

created_at: "2012-04-19"
id: "29"
name: "item"
resource_uri: "/api/v1/item/29/"
updated_at: "2012-04-21"
user: "/api/v1/user/9/"

console.log(this.model.toJSON()) を実行した後のモデルの JSON 出力は次のとおりです。

id: "29"
__proto__: Object

どうしたの？

編集：インスタンス化は次のとおりです。

  var goal = new Goal({id: id});
  goal.fetch();
  var goalFullView = new GoalFullView({
    model: goal,
  });

新しいビューの内容は次のとおりです。

  console.log(this.model.attributes);
  console.log(this.model.toJSON());

コンソールの内容は次のとおりです。

Object
created_at: "2012-04-23"
id: "32"
name: "test"
resource_uri: "/api/v1/goal/32/"
updated_at: "2012-04-23"
user: "/api/v1/user/9/"
__proto__: Object

Object
id: "32"
name: "test"
__proto__: Object

toJSON が属性のクローンを作成することになっている場合、正しい名前をコピーしないのはなぜですか? または、created_at、updated_at フィールドをコピーしないのはなぜですか?

編集2：モデルは次のとおりです：

  var Goal = Backbone.Model.extend({

    // Default attributes for Goal
    defaults: {
      name: "empty goal",
    },

    // Check that the user entered a goal
    validate: function(attrs) {
      if (!attrs.name) {
        return "name is blank";
      }
    },

    // Do HTTP requests on this endpoint
    url: function() {
      if (this.isNew()) {
        return API_URL + "goal/" + this.get("id") + FORMAT_JSON;
      }
      return API_URL + "goal/" + FORMAT_JSON;
      //API_URL + "goal" + FORMAT_JSON, 
    },
  });

編集 3: モデルを使用するビューをレンダリングするには、fetch からの成功のコールバックを使用する必要があることがわかりました。

goal.fetch({success: function(model) { var goalFullView = new GoalFullView({ model: goal, }); }});

4

1 に答える 1

27

このtoJSON()メソッドは、モデルのattributesプロパティの浅いクローンを返すだけです。

注釈付きの Backbone.js ソースから:

toJSON: function(options) {
  return _.clone(this.attributes);
}

setコードを詳しく見ていないと、関数を使用してモデル属性を設定するのではなく、モデル オブジェクトのプロパティを直接設定しているように見えます。

つまり、これをしないでください：

model.name = "item";

これを行う：

model.set("name", "item");

編集：

特定の問題については、モデルがサーバーからの読み込みを完了する前に toJSON を呼び出した可能性があります。

たとえば、これは常に期待どおりに機能するとは限りません。

var model = new Goal({id: 123});
model.fetch();
console.log(model.toJSON());

しかし、これは：

var model = new Goal({id: 123});
model.fetch({
  success: function() {
    console.log(model.toJSON());
  }
});
于 2012-04-21T22:29:33.193 に答える