Question

我是backbonejs的新手。我要做的是，在页面加载时渲染模板并将模型作为_.template函数中的数据参数传递。这是我的bacbone代码：

var Trip = Backbone.Model.extend({
      url: '/trips/' + trip_id + '/show'
    });  

    var InviteTraveller = Backbone.View.extend({
      el: '.page',

      render: function () {
        var that = this;
        var trip = new Trip();
        trip.fetch({
            success: function(){
              console.log(trip); //logs trip object correctly
              var template = _.template($('#invite-traveller-template').html(), {trip: trip});
              that.$el.html(template);
            }
          });       
        }
      });

      var Router = Backbone.Router.extend({
        routes: {
          '': 'fetchTrip'
        }
      }); 

      var inviteTraveller = new InviteTraveller();

      var router = new Router();

      router.on('route:fetchTrip',function () {
        inviteTraveller.render();
      });

      Backbone.history.start();

这是我的示例模板：

<script type="text/template" id="invite-traveller-template">
      <h3>Trip</h3>
      <h3><%= trip.get('name') %></h3>
</script>

在运行时，我在浏览器窗口和控制台显示中获取this：

trip is not defined

我从昨天起就面临这个问题，但还是找不到解决方案。不了解出了什么问题，代码似乎也是正确的。任何帮助将不胜感激。

更新

我删除了

inviteTravellers.render();

来自router.on()，然后在浏览器中重新加载页面。我仍然遇到相同的错误，这意味着在调用<script></script>视图的render()之前正在编译InviteTraveller（模板）。可能的原因是什么？

Answer 1

我有同样的问题（下划线v1.8.2）。我的修复：

var template = _.template($('#invite-traveller-template').html());
var compiled = template({trip: trip});
that.$el.html(compiled);

Answer 2

您将整个模型传递给模板。通常，您可以调用model.toJSON，然后将其结果传递给模板。另外，在模板中使用<%=来呈现属性，该属性适用于您传递的JSON对象的interpolating variables。

你可以将整个模型传递给模板并使用<% ... %>执行纯Javascript代码并使用print来获取属性，但这可能有点过分。

看看this fiddle。

Answer 3

你编写的代码是perfectfly，here's it

我认为您的问题来自另一个代码，而不是您发布的代码，因为如果删除了您的视图无法渲染：

inviteTravellers.render();

尝试通过<h3><% trip.get('name'); %></h3>

来追踪<h3><%= trip.get('name') %></h3>

Answer 4

我的代码似乎是正确的，但我的模板仍然在页面加载时被编译，我收到trip is not defined错误。我还不明白这种行为的原因。

我使用handlebarsjs而不是默认的下划线模板解决了这个问题。

Backbonejs：未在下划线模板中传递模型

4 个答案: