CODEWITHSUNDEEP
jqueryviewbackbone.jsappend
pedalpete
pedalpete

Reputation: 21536

why is backbone.js appending this to the ul, rather than the li

I have an unordered list, and I'm attempting to append a few links to one of the line items.

I'm also trying to wire-up links to each of the line-items, and each of the links I'm placing within the line-items following the lost techies examples.http://lostechies.com/derickbailey/2011/10/11/backbone-js-getting-the-model-for-a-clicked-element/

I'm calling one view to another to another in order to keep the the models connected to the links.

What I can't figure out is I append this.el with the results of my ItemMatch view, so why would my html end up

<ul>
   <li>
      list-item called this.el
   </li>
   <a href="#">
      first item
   </a>
  <a href="#">
      second item
   </a>
     <a href="#">
      third item
   </a>
</>

MyApp.Views.ItemList = Backbone.View.extend({
    tagname: 'li',
    classname:'item_list',
    ...

    render_item_match: function(model){
            var item_match = new MyApp.Views.ItemMatch({model:model});
        $(this.el).append(item_match.el);
        }


});

MyApp.Views.ItemMatch = Backbone.View.extend({
    tagname: 'a',
    classname: 'item_match_result',

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


    events : {
        "click a.item_result": "item_match_result"
    },

    render : function(){
        this.el = HandlebarsTemplates['items/itemSearchResultItem'](this.model.attributes);

    },

    item_match_result: function(){
     console.log(this);
    }
});


})

Upvotes: 0

Views: 1490

Answers (1)

Vitalii Petrychuk
Vitalii Petrychuk

Reputation: 14225

tagname and classname? Try to use tagName and className

Something like this works fine:

MyApp = {Views:{}};
MyApp.Views.ItemList = Backbone.View.extend({
    tagName: 'li',
    className:'item_list',
    //....
    initialize : function() {
        $('body').append($('<ul></ul>'))
        this.render();
    },
    render: function(){
        $('ul').append($(this.el));
    this.render_item_match();
    },
    render_item_match: function(model){
        var item_match = new MyApp.Views.ItemMatch({model:model});
        $(this.el).append(item_match.el);
    }
});

MyApp.Views.ItemMatch = Backbone.View.extend({
    tagName: 'a',
    className: 'item_match_result',
    initialize: function(){
        _.bindAll(this,"item_match_result");
        this.render();
    },
    events : {
        "click a.item_result": "item_match_result"
    },
    render : function(){
        this.el = _.template('<a href="#">testLink</a>');

    },
    item_match_result: function(){
        console.log(this);
    }
});

new MyApp.Views.ItemList();

Output:

<ul><li class="item_list"><a href="#">testLink</a></li></ul>

Upvotes: 2

Related Questions