json - 骨干 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());

这是为什么？

谢谢

score 4 · Accepted Answer

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

您正在使用htmljQuery 的方法，它需要一个字符串（或 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方法不同）。

score 2 · Accepted Answer

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

它将在其中包含占位符，并将采用与模板中的占位符相同的键的参数。例如（Handlebars 模板），

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

把上面的代码看成一个模板，当你编译并存入时this.template，它会返回一个函数，这个函数接受一个json对象作为参数，所以 nowthis.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 内容。

2 回答 2