侧 el 的嵌套 id 中的主干渲染模板

Question

我的 html 设置是这样的。

<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')
},

如果我将 el 更改为 #quantities，那么我的事件处理程序将无法在 el 之外工作。如果我将我的 el 更改为 #product-module，那么一切都会被替换。如何让我的事件处理程序监听并在 #quantities 元素中呈现模板？

我也试过了，没有成功

$('#quantities', this.el)

TypeError: $(...) 不是函数

Answer 1

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')
},

Answer 2

解决方案是用 jquery 函数包装我的主干 js

$(function () {

})

并使用以下代码

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