邊el渲染模板的嵌套編號

我有我的這樣的html設置。邊el渲染模板的嵌套編號

<div id="product-module"> 
    <ul id="product"> 
     <li><input name="product" type="radio"/></li> 
     <li><input name="product" type="radio"/></li> 
     <li><input name="product" type="radio"/></li> 
    </ul> 
    <table id="quantities"/> 

    <script id="myTemplate" type="text/x-handlebars-template"> 
     {{#each this}} 
     <tr> 
      <td class="quantity"> 
       <label class="checked" for="quantity_{{id}}"> 
        <input type="radio" value="" name="quantity"> 
        {{quantity}} 
       </label> 
      </td> 
     </tr> 
    {{/each}} 
    </script> 
</div>

我想設置一個事件處理程序，用於偵聽li上的點擊並呈現數量元素中的模板。

我的骨幹視圖

el: '#product-module', 

template: Handlebars.compile($("#myTemplate").html()), 

events: { 
    "click #product li": "liClicked", 
}, 

initialize: function(){ 
    this.listenTo(this.collection, 'reset', this.render); 
}, 

render: function() { 
    console.log('model ' + this.template(this.collection.toJSON())) 
    this.$el.html(this.template(this.collection.toJSON())); 
}, 

liClicked: function(event, callback){ 
    console.log('liClicked') 
},

如果我改變埃爾到#quantities，然後我的事件處理程序沒有在EL以外的工作。如果我將我的el更改爲#product-module，則所有內容都將被替換。如何讓我的事件處理程序偵聽並在#quantities元素中呈現模板？

我也試圖與沒有成功

$('#quantities', this.el)

TypeError: $(...) is not a function

來源

2015-06-22 Code Junkie

什麼是你想用'$（ '＃數量'，this.el）'做什麼？如果你想將'this.el'插入'＃個數量'，那麼你想'$（'＃數量'）。append（this.el）;' –

我不確定是否有「骨幹」處理這種方式。另一種解決方案似乎是使用jQuery，它要求我必須將js包裝在jQuery函數中。 –

'如果我將我的el更改爲＃product-module，則所有內容都將被替換。正在替換的HTML應該是您模板的一部分。有什麼理由不能這樣做？ –

HTML

<script id="myTemplate" type="text/x-handlebars-template"> 
    {{#each this}} 
    <tr> 
     <td class="quantity"> 
      <label class="checked" for="quantity_{{id}}"> 
       <input type="radio" value="" name="quantity"> 
       {{quantity}} 
      </label> 
     </td> 
    </tr> 
    {{/each}} 
</script> 

<div id="product-module"> 
    <ul id="product"> 
     <li><input name="product" type="radio"/></li> 
     <li><input name="product" type="radio"/></li> 
     <li><input name="product" type="radio"/></li> 
    </ul> 
    <table id="quantities"/> 
</div>

查看

el: '#product-module', 

template: Handlebars.compile($("#myTemplate").html()), 

events: { 
    "click #product li": "liClicked", 
}, 

initialize: function(){ 
    this.listenTo(this.collection, 'reset', this.render); 
}, 

render: function() { 
    var markup = this.template(this.collection.toJSON()); 
    // this.$() is short for this.$el.find() 
    this.$('#quantities').html(markup); 
}, 

liClicked: function(event, callback){ 
    console.log('liClicked') 
},

來源

2015-06-22 20:02:20

賓果，你去吧。很好，謝謝。 –

[「如果jQuery包含在頁面中，每個視圖都有一個** $ **函數，它在視圖的元素中運行查詢範圍......它相當於運行：'view。$ el.find（selector）'] （http://backbonejs.org/#View-dollar） –

是的，我只是喜歡使用'this。$ el.find'，而不是速記，可能需要額外的解釋。 –

的解決辦法是換我的js骨幹用jQuery函數

$(function() { 

})

，並使用下面的代碼

$('#quantities', this.el).html(this.template(this.collection.toJSON()));

來源

2015-06-22 19:48:11

邊el渲染模板的嵌套編號

回答

相關問題