Question

所以我在获取模型并尝试将其渲染到下面此视图中的模板后遇到问题。我四处搜索，发现我必须做_.bindAll等，但它仍然不起作用。在第一个console.log中，我试图获取用户名，它返回undefined。我尝试在成功回调中放置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;

});

有人可以请一些亮点吗？

Answer 1

您的第一个问题是您的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(),
    // ...

Answer 2

您可能想要检查成功回调中this的值是什么，我怀疑它是您所期望的View，这就是您获得未定义的原因。在模板中，您可以调用console.log进行额外调试。

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

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

获取后没有属性的骨干模型

2 个答案: