Question

我正在尝试进行JSON调用并使用主干列出其中的项目。我成功恢复了这些项目，并且能够通过控制台日志确认它们可用，但是当我尝试将它们传递到我的模板时，我收到错误说

"Uncaught ReferenceError: quotes is not defined"

我的代码：

var Quotes = Backbone.Collection.extend({
  url: '/quotes.json'
});

var UserListView = Backbone.View.extend({
  el: '.quote-list',
  render: function() {
    var that = this;
    var quotes = new Quotes();
    quotes.fetch({
      success: function(quotes) {
        var variables = {
          search: "search"
        };
        var template = _.template($('#quotes-template').html(), variables);
        console.log(template)
        that.$el.html(template);
      }
    })
  }
});

var Router = Backbone.Router.extend({
  routes: {
    "": "home"
  }
});

$(document).ready(function() {
  var userListView = new UserListView;
  var router = new Router;
  router.on('route:home', function() {
    //render user list
    userListView.render();
  });

  Backbone.history.start();

})

<body>
  <div class="quote-list"></div>

  <script type="text/template" id="quotes-template">
    <% _.each(quotes, function(quote) { %>
      <ul>
        <li>
          <%=quote.source %>
        </li>
        <li>
          <%=quote.context %>
        </li>
      </ul>
      <% }); %>
  </script>
  <script src="js/app.js"></script>
</body>

Answer 1

您在下划线模板中使用变量quotes，但您传递给_.template()的数据不包含quotes。

您的代码应为：

quotes.fetch({
  /*---------------collection----------------*/
  /*-------------------v----------------*/
  success: function(quotes, response, options) {
    var variables = {
      search: "search"
    }; // ...?
    var template = _.template($('#quotes-template').html(), {
      quotes: quotes
    });
    that.$el.html(template);
  }
});

由于成功回调中的第一个参数quotes是Backbone.Collection，您可能还想按如下方式更改模板，否则您可以传递第二个参数，即对{的实际响应{1}}。

_.templte()

对象没有传递给骨干中的模板

1 个答案: