使用Backbone.js和Underscore.js的應用

Question

我是Backbone和Underscore的初學者。 這是我制作的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>

Answer 1

更改了var appTest = new app（）;

至

var appTest = new app.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>

Answer 2

我對文件結構進行了一些更改，就像使用jQuery.ready在DOM准備好后加載應用程序一樣

 $(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; });

因此，現在可以使用。 無論如何，感謝你們為我提供的幫助。

使用Backbone.js和Underscore.js的應用

問題描述

2 個解決方案

解決方案1
1 2015-03-24 22:24:25

解決方案2
1 已采納 2015-03-24 22:59:49

使用Backbone.js和Underscore.js的應用

問題描述

2 個解決方案

解決方案1 1 2015-03-24 22:24:25

解決方案2 1 已采納 2015-03-24 22:59:49

解決方案1
1 2015-03-24 22:24:25

解決方案2
1 已采納 2015-03-24 22:59:49