javascript - 将数据传递给 Backbone Js 中的 View 在浏览器中看不到

标签 javascript backbone.js

我刚刚开始我的 Backbone 教程,在第一次作业时我必须在页面上显示一点 ul。我写了下面的代码,浏览器没有显示任何错误,但也没有在屏幕上显示列表。有人可以检查我的代码,我哪里做错了。

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Pass Data to Views</title>
</head>
<body>
  <!-- ========= -->
  <!-- Your HTML -->
  <!-- ========= -->

  <ul id="songs"></ul>

  <!-- ========= -->
  <!-- Libraries -->
  <!-- =========
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></script>  -->
  <script src="js/jquery.min.js" type="text/javascript"></script>
  <script src="js/underscore-min.js" type="text/javascript"></script>
  <script src="js/backbone-min.js" type="text/javascript"></script>
  <script src="js/backbone.localStorage-min.js" type="text/javascript"></script>
  <!-- =============== //
  <!-- Javascript code -->
  <!-- =============== -->
  <script type="text/javascript">

// Model
var Song = Backbone.Model.extend();

// Collection : just a group of Models
var Songs = Backbone.Collection.extend({
  model: Song
});

// View
var SongView = Backbone.View.extend({
  tagName: "li",
  render: function(){
    this.$el.html(this.model.get("title"));
    return this;
  }
});

var SongsView = Backbone.View.extend({
  render: function(){
    var self = this;

    this.model.each(function(song){
      var songView = new SongView({ model: song });
      self.$el.append(songView.render().$el);
    });
  }
});


// Adding Data to Models.
var songs = new Songs([
  new Song({title: "This is title One"}),
  new Song({title: "This is Title Two"}),
  new Song({title: "This is title third"})
]);

var Object_SongsView = new SongsView({el: "songs", model: songs});
Object_SongsView.render();

  </script>

</body>
</html>

最佳答案

应该像这样创建 View (注意 songs 的 CSS 选择器前面的 #):

var Object_SongsView = new SongsView({
    el: "#songs",
    model: songs
});

关于javascript - 将数据传递给 Backbone Js 中的 View 在浏览器中看不到,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27650640/

相关文章:

javascript - 我怎样才能在每个时期之后做一个接一个的功能

javascript - 窗口关闭,使用链接还是输入 URL?

javascript - InnerView 不响应其模板中的 DOM 事件

javascript - Coffeescript 未捕获类型错误 : object is not a function Error

javascript - touchmove 在 Canvas 上绘制两条线而不是一条

javascript - 如何在两个或多个点之间画线? (积分可以动态改变)

javascript - 主干 subview 调用父级渲染

javascript - Backbone 将参数传递给模型 url

jquery - 模板内的主干、Bootstrap 模式未显示

javascript - 如何随机验证动态行