2012-01-15 63 views
0

我有一個無序的列表,我試圖追加幾個鏈接到其中一個訂單項。爲什麼backbone.js將此追加到ul,而不是li

我也試圖連接每個項目的鏈接,以及我在丟失的技術示例後面的行項目中放置的每個鏈接.http://lostechies.com/ derickbailey/2011/10/11/backbone-js-getting-the-model-for-a-clicked-element/

我打電話給另一個視圖,以保持模型連接到另一個鏈接。

我不出來什麼是我追加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); 
    } 
}); 


}) 

回答

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>

+0

這是完美的維塔利,就這麼簡單 – pedalpete 2012-01-15 22:55:06