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上的点击并在quantity元素中呈现模板。

我的骨干观点

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

骨干渲染模板在侧el的嵌套id

2 个答案: