Backbone toJSON无法渲染

Question

当我使用模型的Backbone toJSON 方法时：

this.$el.html(this.model.toJSON());

它不会将模型渲染到视图根元素（多个属性）中。

但是当我从模型中获得一个属性时，就像这样;

 this.$el.html(this.model.get("city"));

渲染得当。

此外，当我在第一种情况下使用模板（toJSON）时 - 它被渲染得很好。

this.$el.html(this.template(this.model.toJSON());

为什么？

由于

Answer 1

this.$el.html(this.model.toJSON());

你正在使用jQuery的html方法，它需要一个字符串（或一个DOM元素或一个jQuery元素）来显示一个JSON对象。

this.$el.html(this.template(this.model.toJSON());

在这里，您使用的是template方法，我假设该方法正在使用JSON对象来评估将返回字符串的模板。 html方法接收此字符串并显示它。

this.$el.html(JSON.stringify(this.model.toJSON()));

这会显示this.model.toJSON()的结果（但不会与使用template方法相同）。

Answer 2

因此，基本上this.template（在大多数情况下）将是html template的编译版本，您可以在视图中使用。

它将包含占位符，并且将使用与模板中占位符相同的键作为参数。例如（Handlebars模板），

<section id="{{id}}">
  <header>{{header_text}}</header>
</section>

将上述代码视为模板，当您在this.template中编译并存储它时，它会返回一个函数，该函数将json对象作为参数，所以现在this.template是一个功能。

你可以像下面这样打电话，

var html_text = this.template({
  id : "main_content",
  header_text : "Hi Welcome !!"
});

this.$el.html(html_text);

执行后，el的内容将是

<section id="main_content">
  <header>Hi Welcome !!</header>
</section>

因此，当您执行this.$el.html(this.template(this.model.toJSON());时，它实际上会为您生成json方法所需的this.template参数，因此工作正常。

正如Loamhoof所说，在this.$el.html(this.model.get("city"));中，您使用html方法，该方法将根据模型的属性值设置el的html内容。