使用 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

我对文件结构做了一些更改，就好像在 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;
});

所以现在可以了。无论如何，感谢你们试图帮助我。

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

App using Backbone.js and Underscore.js

javascript

backbone.js

underscore.js