在 Backbone Js 中将数据传递到视图在浏览器中看不到
Passing Data to Views in Backbone Js does not see in the browser
我刚刚开始我的骨干教程,在第一次作业中,我必须在页面上显示一亮的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>
视图应该像这样创建(注意#
在 songs
的 CSS 选择器前面
var Object_SongsView = new SongsView({
el: "#songs",
model: songs
});
相关文章:
- 为什么我在Internet Explorer上看不到html元素
- ajax请求成功,但可以'我看不到我的数据
- 使用jQuery for RSS看不到多个帖子
- 执行此代码时,我看不到警告框
- Javascript 方法看不到对象变量
- 看不到变量
- Phantomjs 看不到 Twitter/Facebook 授权页面
- AS3 XML上的翻页在IE和FIREFOX上看不到
- JavaScript 看不到声明的变量
- 看不到函数外的Javascript变量
- Javascript对象看不到内部函数
- 为什么我的firefox扩展javascript不能访问opener窗口,也看不到window.name
- 从Node.js查询Neo4j时看不到任何回调
- I'我在css中做了一些隐藏的东西,我可以'I don’我现在点击按钮时看不到它
- 我看不到Javascript数组中的图像
- 硒 IDE 1.8.1 警报框:运行测试时看不到警报框
- 在网格PhongMaterial地面和聚光灯上看不到任何带有Colada模型的阴影
- 我正在通过 javascript 向表添加行,但是当我提交页面时,C# 看不到添加的行
- HTML视图看不到AngularJS
- js视图看不到本地脚本