App using Backbone.js and Underscore.js

Question

I am a beginner in Backbone and Underscore. So here's the javascript I made . It's about to add bookmarks and make them be showed so that means using models and views from Backbone. But I got a problem I guess, cuz when running nothing happens, so if anyone could point out my errors?? Thanks in advance. This is ann.js and after it's 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>

What does your template look like? it will be hard to figure out without the accompanying html. — HeadCode
– HeadCode, Commented Mar 24, 2015 at 21:07
may i suggest a quick session with the devtools in the browser of your choice? you can probably find the problem far quicker than us. — Stephen Thomas
– Stephen Thomas, Commented Mar 24, 2015 at 21:50
@StephenThomas Yeah I should do that using Chrome. Which section would you like to know when I run the app??? — japemon
– japemon, Commented Mar 24, 2015 at 21:54
I don't want to know about any section. I'm suggesting that you should. Either add console.log statements appropriately or set breakpoints. If you're not familiar with JavaScript debugging, see, e.g. developer.chrome.com/devtools/docs/javascript-debugging — Stephen Thomas
– Stephen Thomas, Commented Mar 24, 2015 at 21:58

Molda · Accepted Answer · 2015-03-24 22:24:25Z

Changed var appTest = new app();

to

var appTest = new app.EnsbookmarkView;

and it works and even no error in console

you can try it at the bottom

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>

Wow yeah it works here but strange how it does not work when I test in on localhost, because I run the app via grunt build and I got a file server.js that does send some files. You have changed what exactly??
I posted an answer where I figred it out to work but I will accept your answer also. Thanks

Billal BEGUERADJ · Accepted Answer · 2017-04-17 05:29:53Z

I did some changes to the file structure, as if to load the application once the DOM is ready, using 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;
});

So it works now. Anyway thanks guys for trying to help me.

Collectives™ on Stack Overflow

App using Backbone.js and Underscore.js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related