Question

任何人都可以帮我弄清楚当我加载这个HTML时为什么会发生什么？它使用Python的SimpleHTTPServer在本地提供服务，现在我想要的只是让文字样本和用户出现在屏幕上。

main.js

    /* Model */

    var User = Backbone.Model.extend({});

    var sample_user = new User({
        name: {
          first: 'sample',
          last: 'user'
        }
    });

    /* View */

    var UserView = Backbone.View.extend({

        tagName: 'div',

        className: 'card',

        template: _.template( $('#card_template').html() ),

        render: function() {
          this.$el.html( this.template( this.model.toJSON() ) );
          return this;
        }

    });

    var sample_card = new UserView({ model: sample_user });
    sample_card.render();

main.html中

<!doctype html>
<html>
<head>
  <title>Backbone kickstart</title>
</head>
<body>
  <script type="text/template" id="card_template">
    <h1><%= name.first + ' ' + name.last %></h1>
  </script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore.js" charset="utf-8"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js" charset="utf-8"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone.js" charset="utf-8"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js" charset="utf-8"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js" charset="utf-8"></script>
  <script type="text/javascript" src="main.js" charset="utf-8"></script>
</body>
</html>

Answer 1

默认情况下，Backbone的render在您构建自己的el时不对页面执行任何操作。您的render：

render: function() {
  this.$el.html( this.template( this.model.toJSON() ) );
  return this;
}

只需填写视图的el，但实际上没有人将el添加到页面中。您案例中通常的模式是这样的：

var sample_card = new UserView({ model: sample_user });
$('body').append(sample_card.render().el);

虽然我在这里，但我建议您不要将模板放在<body>内，这样就很容易意外地覆盖它们。如果他们在<head>你可能不会操纵，你会有更好的时间。

Backbone初学者无法在屏幕上显示视图

1 个答案: