Home/ Questions/Q 8881411
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T20:20:33+00:00

Iam trying to build a very simple ul where u have a input box

  • 0

Iam trying to build a very simple ul where u have a input box and add button , on clicking add button , text from input is appended to ul

this is my code :

HTML : 

<body>
<input type="text" id="name">
<button id="add">Add</button>
<ul id="mylist"></ul>

JS : 

$(function(){

var myCollection = Backbone.Collection.extend();

var myView = Backbone.View.extend({

    el:$('body'),

    tagName:'li',

    initialize : function(e){
        this.collection.bind("add",this.render,this);
    },

    events:{
        'click #add' : 'addfoo',
        'click .button':'removefoo'
    },

    addfoo:function(){
       var myname= $('#name').val();
       $('#name').val('');
       console.log('name entered: '+myname);
       this.collection.add({name:myname});
    },

    removefoo:function(){
             //need the code here 
    },

    render:function(){

        $('#mylist').empty();
        this.collection.each(function(model){
            $('#mylist').append('<li>'+model.get('name') + "<button class='button'>"+"delete"+"</button></li>");
        });

    }

});
var view = new myView({collection: new myCollection()});
    });

My add funcitonality is working , but when i click the button for delete , which model from collection should be deleted , iam stuck there , please help me out.Just need the code , for what do delete from collection in removefoo function.

In other word how do i get which model to be removed when button is clicked

Thank you

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think you need a more modular approach to Backbone, let me explain.

    Backbone is a way to organize your code. Having just one Backbone view do it all, doesn’t change a lot.

    Instead, try to see what views you actually need:

    • MainView
    • ListView
    • ListItemView

    MainView could look like this:

    var MainView = Backbone.View.extend({

    el: 'body',

    initialize : function(options) {
       this.collection = new Backbone.Collection.extend({ url: '/items' });
    },

    events:{
    },

    render:function(){
        var listView = new ListView({ el: this.$("#myList") });
        listView.render();

        this.collection.fetch();

        return this;
    }
});

    ListView

    var ListView = Backbone.View.extend({

    tagName: 'ul',

    initialize : function(options) {
        _.bindAll(this, "render");

        this.collection.on("add", this.appendListItem, this);
    },

    events:{
    },

    render: function() {
        this.collection.each(this.appendListItem, this);

        return this;
    },

    appendListItem: function (model, collection, options) {
        var listItem = new ListItemView({ model: model});
        this.$el.append(listItem.render().el);
    }
});

    ListItemView

    var ListItemView = Backbone.View.extend({

    tagName: 'li',

    initialize : function(options) {
        _.bindAll(this, "render");

        this.model.on("destroy", this.remove, this);
    },

    events:{
        "click button": "delete"
    },

    render:function(){
        this.$el.text(this.model.get('name'));
        this.$el.append("<button class='button'>Delete</button>");

        return this;
    },

    delete: function (event) {
        this.model.destroy();
    }
});

    Kick off the main view: var view = new MainView().render();

    • 0