CODEWITHSUNDEEP
javascriptbackbone.jsunderscore.js
japemon
japemon

Reputation: 325

App using Backbone.js and Underscore.js

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>

Upvotes: 1

Views: 149

Answers (2)

japemon
japemon

Reputation: 325

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.

Upvotes: 1

Molda
Molda

Reputation: 5704

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>

Upvotes: 1

Related Questions