使用Backbone.js和Undercore.js的应用程序
App using Backbone.js and Underscore.js
我是Backbone和Undercore的初学者。这是我制作的javascript。它将添加书签并显示它们，这意味着使用Backbone中的模型和视图。但我想我遇到了一个问题，因为当运行时什么都不会发生，所以如果有人能指出我的错误吗？？提前谢谢。这是ann.js，之后是index.html
var app = app || {};
app.Bookmark = Backbone.Model.extend({
defaults: {
key : 'Unknown',
value : 'Example',
lien : 'http://www.example.com'
}
});
app.Ensbookmark = Backbone.Collection.extend({
model : app.Bookmark
});
app.BookmarkView = Backbone.View.extend({
tagName: 'div',
template: $('#bookmarkTemplate').html(),
events :{
'click .delete': 'delBookmark'
},
delBookmark:function(){
this.model.destroy();
this.remove();
},
render: function(){
var tmp1 = _.template(this.template);
this.$el.html(tmp1(this.model.toJSON()));
return this;
/*
this.$el.html(this.template(this.model.attributes));
return this;
*/
}
});
app.EnsbookmarkView = Backbone.View.extend({
el:$( '#bookmarks' ),
initialize: function(initialBookmarks){
this.collection = new app.Ensbookmark(initialBookmarks);
this.render();
this.listenTo(this.collection, 'add', this.renderBookmark);
},
events:{
'click #add':'addBookmark'
},
addBookmark: function (e){
e.preventDefault();
var data = {};
$('#addBookmark div').children('input').each(function(i,el){
if($(el).val()!==""){
data[el.id]=$(el).val();
}
});
this.collection.add(new app.Bookmark(data));
},
render: function() {
this.collection.each(function (item) {
this.renderBookmark(item);
}, this);
},
renderBookmark:function(item){
var BookmarkView = new app.BookmarkView({
model: item
});
this.$el.append(BookmarkView.render().el);
}
});
var appTest = new app();<!DOCTYPE html>
<html>
<head>
<title>Web</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="ann.js"></script>
</head>
<body>
<script id="bookmarkTemplate" type="text/template">
<ul>
<li><%= key %></li>
<li><%= value %></li>
<li><%= lien %></li>
</ul>
<button class="delete">Supprimer</button>
</script>
<div id="bookmarks">
<form id="addBookmark" action="#">
<div>
Id : <input type="text" id="key"/>
Titre : <input type="text" id="value"/>
Lien : <input type="url" id="lien">
<button id="add">Add</button>
</div>
</form>
</div>
</body>
</html>更改了var appTest=new app（）；
至
var appTest=新应用程序。EnsbookmarkView；
它工作，甚至在控制台中没有错误
你可以在底部试试
var app = app || {};
app.Bookmark = Backbone.Model.extend({
defaults: {
key : 'Unknown',
value : 'Example',
lien : 'http://www.example.com'
}
});
app.Ensbookmark = Backbone.Collection.extend({
model : app.Bookmark
});
app.BookmarkView = Backbone.View.extend({
tagName: 'div',
template: $('#bookmarkTemplate').html(),
events :{
'click .delete': 'delBookmark'
},
delBookmark:function(){
this.model.destroy();
this.remove();
},
render: function(){
var tmp1 = _.template(this.template);
this.$el.html(tmp1(this.model.toJSON()));
return this;
/*
this.$el.html(this.template(this.model.attributes));
return this;
*/
}
});
app.EnsbookmarkView = Backbone.View.extend({
el:$( '#bookmarks' ),
initialize: function(initialBookmarks){
this.collection = new app.Ensbookmark(initialBookmarks);
this.render();
this.listenTo(this.collection, 'add', this.renderBookmark);
},
events:{
'click #add':'addBookmark'
},
addBookmark: function (e){
e.preventDefault();
var data = {};
$('#addBookmark div').children('input').each(function(i,el){
if($(el).val()!==""){
data[el.id]=$(el).val();
}
});
this.collection.add(new app.Bookmark(data));
},
render: function() {
this.collection.each(function (item) {
this.renderBookmark(item);
}, this);
},
renderBookmark:function(item){
var BookmarkView = new app.BookmarkView({
model: item
});
this.$el.append(BookmarkView.render().el);
}
});
var appTest = new app.EnsbookmarkView;<!DOCTYPE html>
<html>
<head>
<title>Web</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="ann.js"></script>
</head>
<body>
<script id="bookmarkTemplate" type="text/template">
<ul>
<li><%= key %></li>
<li><%= value %></li>
<li><%= lien %></li>
</ul>
<button class="delete">Supprimer</button>
</script>
<div id="bookmarks">
<form id="addBookmark" action="#">
<div>
Id : <input type="text" id="key"/>
Titre : <input type="text" id="value"/>
Lien : <input type="url" id="lien">
<button id="add">Add</button>
</div>
</form>
</div>
</body>
</html>我对文件结构做了一些更改，就好像在DOM准备好后使用jQuery.ready 加载应用程序一样
$(function(){
var Bookmark = Backbone.Model.extend({
defaults: {
key : 'Unknown',
value : 'Example',
lien : 'http://www.example.com'
}
});
var Ensbookmark = Backbone.Collection.extend({
model : Bookmark
});
var Bookmarks = new Ensbookmark;
var BookmarkView = Backbone.View.extend({
tagName: 'div',
className: 'bookContainer',
template: _.template($('#bookmarkTemplate').html()) ,
/* $('#bookmarkTemplate').html(),*/
events :{
'click .delete': 'delBookmark'
},
delBookmark:function(){
this.model.destroy();
this.remove();
},
render: function(){
//var tmp1 = _.template(this.template);
//this.$el.html(tmp1(this.model.toJSON()));
this.$el.html(this.template(this.model.toJSON()));
return this;
/*
this.$el.html(this.template(this.model.attributes));
return this;
*/
}
});
var EnsbookmarkView = Backbone.View.extend({
el:$( '#bookmarks' ),
initialize: function(initialBookmarks){
this.collection = new Ensbookmark(initialBookmarks);
this.render();
this.listenTo(this.collection, 'add', this.renderBookmark);
},
events:{
'click #add':'addBookmark'
},
addBookmark: function (e){
e.preventDefault();
var data = {};
$('#addBookmark div').children('input').each(function(i,el){
if($(el).val()!==""){
data[el.id]=$(el).val();
}
});
this.collection.add(new Bookmark(data));
},
render: function() {
this.collection.each(function (item) {
this.renderBookmark(item);
}, this);
},
renderBookmark:function(item){
var BookmarkV = new BookmarkView({
model: item
});
this.$el.append(BookmarkV.render().el);
}
});
var appTest = new EnsbookmarkView;
});相关文章：
- 在openshift node js应用程序中获取请求
- 使用CI和CodeDeploy对node.js应用程序进行连续部署
- 如何构建angular.js应用程序
- node.js应用程序中的async.js问题
- 使用connect vhost为多个express.js应用程序提供服务
- 在node.js应用程序中接收JMS消息
- JS应用程序中基于DOM的XSS保护
- Express.js应用程序最大CPU
- Node.js应用程序-由NPM启动时的不同Node_ENV
- 如何将现有的angular js应用程序集成到Laravel 5中
- React js应用程序's在托管应用程序中打开时将覆盖css样式
- angular js应用程序不工作
- 使用Sails.JS为静态HTML/JS应用程序提供身份验证
- 如何计算angular JS应用程序(单页应用程序）的页面加载时间
- 使用Q节点模块时，Bluemix node.js应用程序部署失败
- Heroku类型的简单HTML/JS应用程序托管
- 通过SSL/TLS连接访问Vagrant上的Node.js应用程序
- 在Backbone.js应用程序中使用lodash而不是下划线
- fs.readFileSync(）在express js应用程序中失败
- 在Chrome和Safari中启动Angular JS应用程序的差异
