为什么backbone.js将此附加到ul而不是li

时间:2012-01-15 20:12:48

标签: jquery views backbone.js append

我有一个无序列表,我试图在其中一个订单项附加一些链接。

我也在尝试连接每个订单项的链接,以及我在丢失的技术示例后面的行项目中放置的每个链接.http://lostechies.com/derickbailey / 2011/10/11 /骨架JS-得到最模型换一个-点击的元件/

我将一个视图调用另一个视图以保持模型连接到链接。

我无法弄清楚的是我将this.elItemMatch视图的结果相关联,那么为什么我的html会结束

<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);
    }
});


})

1 个答案:

答案 0 :(得分:2)

tagnameclassname?尝试使用tagNameclassName

这样的事情很好:

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();

<强>输出:

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