22

玉傢伙,所以我有密鑰對值的這陣我用我的模型,該模型:
循環中下劃線JS模板

var acs = [{'label':'input box'},{'label':'text area'}]; 

代碼的其餘部分則如下

var Action = Backbone.Model.extend({}); 
var action = new Action(acs); 
var ActionView = Backbone.View.extend({ 
    tagName:"li", 
    template: _.template($('#actions-template').html()), 
    events:{ 
     "click":"makeInput" 
    }, 
    render:function(){ 
     $(this.el).html(this.template(this.model.toJSON())); 
     $(".hero-unit>ul").append(this.el); 
     return this; 
    }, 
    makeInput:function(){ 
     alert("im in"); 
    } 
}); 
var actionView = new ActionView({model:action}); 
actionView.render(); 

問題是關於視圖。我怎樣才能遍歷我傳遞,如果這模型是我想要的看法有

<script type="text/template" id="actions-template"> 
<% _.each(action, function(acs) { %> 
    <a class="btn"><%= label %></a> 
<% }); %> 
</script> 

有什麼毛病我的看法和循環,我相信。任何線索? 謝謝!

+0

http://stackoverflow.com/questions/4778881/how-to-use-underscore-js-as-a-template-engine也有相當多的解決方案。 – Pramod 2012-12-16 17:26:18

回答

28

你可能會希望做兩件事情:

  1. 調整你提供的模板中的數據:

    $(this.el).html(this.template({ 
        action: this.model.toJSON() 
    })); 
    
  2. 調整模板的內部使用acs.label代替label

    <a class="btn"><%= acs.label %></a> 
    

演示:http://jsfiddle.net/ambiguous/xczBy/

關於第二個想法,我認爲你應該使用集合而不是單個模型。你會想補充一點:

var ActionCollection = Backbone.Collection.extend({ 
    model: Action 
}); 

,然後調整render使用this.collection

$(this.el).html(this.template({ 
     actions: this.collection.toJSON() 
    })); 

然後啓動事情是這樣的:

var actions = new ActionCollection(acs); 
var actionView = new ActionView({collection: actions}); 

最後,請參閱actions在模板中:

<% _.each(actions, function(acs) { %> 

演示:http://jsfiddle.net/ambiguous/6VeXk/

這將更好地匹配Backbone的基於鍵/值的模型。

+0

是的!非常感謝你 – climboid 2012-03-24 21:18:16

+0

一個小問題,但它爲什麼是行動:this.model.toJSON()? – climboid 2012-03-24 21:26:28

+1

@climboid:你的模型是一個數組(這在Backbone中很奇怪),你需要給它一個某種類型的名稱,否則模板將無法引用它。模型通常是鍵/值對的集合(或多或少),因此這些值默認會獲取名稱。切換到一個集合(如我更新的答案)會更有意義。 – 2012-03-24 21:35:48