Home/ Questions/Q 6961173
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T15:29:47+00:00

I have the following HTML code: <ul id=’item-list’></ul> <button id=’add-item’>Add Item</button> <script type=’text/template’ id=’item-template’>

  • 0

I have the following HTML code:

<ul id='item-list'></ul>
<button id='add-item'>Add Item</button>
<script type='text/template' id='item-template'>
  <li><%= title %></li>
</script>

and the following javascript / backbone js code:

var Item = Backbone.Model.extend({});
var ItemCollection = Backbone.Collection.extend({
  model: Item
});


var ItemListView = Backbone.View.extend({
   el : $("#item-list"),
   initialize(options) {
     this.item_collection = new ItemCollection();
   }, 
   appendItem: function() {
     new_item = new Item({'title' : 'New Item'});
     this.item_collection.add(new_item);
     item_template = $("#item-template");
     item_html = _.template(item_template,new_item.toJSON());
     this.el.append(item_html);
   }
});

var AddItemView = Backbone.View.extend({
  el: $("add-item"),
  events: {
    "click" : "addItem"
  },
  addItem: function() {
    // ?
  }
});

item_list_view = new ListItemView();
add_item_view = new AddItemView();

How can I add a new item to the item list view and collection from an event in the addItemView View? also, should the creation of the model, appending it to the collection, and appending it to the view all take place in the ListItemView.addItem() function, or should I instead have it binded to the add event of the ItemCollection ? I am still having some trouble wrapping my head around the way bindings and the interactions between various views, models, and collections should work.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    here’s an example of events between 2 views working with a model/collection. Basically, use collectionName.bind(‘add’,yourFunction,this); 

        <script type="text/template" id="item-template">
      <div class="nonedit"><span ><%= name %> (<%= age %>)</span> <a class="delete" href="#">X</a>
      <div class="edit"><input /></div>

    </script>
    <body>
        <ul class="1"></ul>
        <div class="count">
            <div></div>
            <input id="name" placeholder="enter a name"/>
            <input id="age" placeholder="enter age"/>
        </div>

    </body>

    var Person = Backbone.Model.extend({
    defaults:function(){
        return {
            name:'unknown',
            age:0   
        };
    }
});

var People = Backbone.Collection.extend({
    model:Person
});

var people = new People;

var Li = Backbone.View.extend({
    tag:'li',
    class:'name',
    template:_.template($('#item-template').html()),
    events:{
        'click a.delete':'remove'
    },
    initialize:function(){
        this.model.bind('change',this.render,this);
        $(this.el).html(this.template(this.model.attributes));
    },
    render:function(){
        $(this.el).html(this.template(this.model.attributes));  
    },
    remove:function(){
        this.model.destroy();
        $(this.el).fadeOut(300);
        setTimeout(function(){$(this.el).remove()},400);
    },
    modify:function(){
        $(this.el).addClass('edit');
    }
});

var Ul = Backbone.View.extend({
    el:$('ul'),
    events:{

    },
    initialize:function(){
        people.bind('add',this.add,this);
    },
    render:function(){

    },
    add:function(model){
        var li = new Li({model:model});
        this.el.append(li.el);
    }


});

var ul = new Ul;



var Div = Backbone.View.extend({
    el:$('.count'),
    nameInput:$('#name'),
    ageInput:$('#age'),
    events:{
        'keypress input#name':'keypress',
        'keypress input#age':'keypress',
    },
    initialize:function(){
        people.bind('add',this.add,this);
    },
    render:function(){

    },
    add:function(e){
        this.el.find('div').html(people.length);
    },
    keypress:function(event){
        if(event.which == 13){
            people.add({name:this.nameInput.val(),age:this.ageInput.val()});
        }
    }
});

var div = new Div;
    • 0