0

因此,在获取模型并尝试将其渲染到下面此视图中的模板后,我遇到了问题。我四处搜索,发现我必须做一个_.bindAll等,但它仍然不起作用。在我试图获取用户名的第一个 console.log 中,它返回未定义。我尝试将this.render()(由于 fetch 的异步性质)放入成功回调中,但没有奏效。当我检查console.log(data)产量时,我确实看到了我想要的值,但似乎没有任何东西被传递给模板。

 define([
  'jquery',
  'underscore',
  'backbone',
  'models/UserModel',
  'text!/assets/templates/dashboard.html'
  ], function($, _, Backbone, UserModel, dashboardTemplate) {

    window.DashboardView = Backbone.View.extend({

    el: $(".content"),

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

      this.user = new UserModel();
      this.user.fetch({
        success: console.log(this.user.get("name")),
        error: function(model, response) {
          console.log("error fetching model");
          console.log(model);
          console.log(response);
        }
      });
    },

    render: function() {

      console.log(this);
      var data = {
        user: this.user,
        _: _
      };
      console.log(data);

      var compiledTemplate = _.template(dashboardTemplate, data);
      $(this.el).html(compiledTemplate);
    }
  });

  return DashboardView;

});

有人可以解释一下吗?

4

2 回答 2

4

您的第一个问题是您console.log立即运行,而不是成功。

this.user.fetch({
    success: console.log(this.user.get("name")),
    // ...

表示您正在调用log,然后将其返回值作为success回调传递。您需要传递一个匿名函数。

var view = this;
this.user.fetch({
    success: function(){
        console.log(view.user.get("name")),
        view.render();
    },
    // ...

其次,当您渲染模板时,您需要将模型的属性传递给它,但目前您正在传递模型本身。为此,您可以使用toJSON将模型转换为标准对象。

var data = {
    user: this.user.toJSON(),
    // ...
于 2012-12-27T14:37:11.413 回答
1

您可能想检查this成功回调中的值是什么,我怀疑它是否View如您所愿,这就是您得到未定义的原因。在您的模板中,您可以调用console.log额外的调试。

我在您的代码中看到的主要问题是_.template()返回的函数不是静态内容。因此你应该打电话给$(this.el).html(compiledTemplate());.

传入datacompiledTemplate 设置将嵌入数据并使您的模板静态化。您通常应该只将您的模板代码传递给_.template然后使用当前数据调用已编译的函数:compiledTemplate(this.user.toJSON());

于 2012-12-27T14:34:17.577 回答