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

Posted 2023-02-26

【中文标题】侧 el 的嵌套 id 中的主干渲染模板

【英文标题】：Backbone render template in side el's nested id

【发布时间】：2015-06-22 19:29:10

【问题描述】：

我的 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: $(...) 不是函数

【问题讨论】：

你想用$('#quantities', this.el)做什么？如果您尝试将this.el 插入#quantities，那么您需要$('#quantities').append(this.el);

我不确定是否有一种“骨干”方式来处理这个问题。另一个解决方案似乎是使用 jQuery，这要求我必须将我的 js 包装在一个 jQuery 函数中。

If i change my el to #product-module, then everything gets replaced. 被替换的 HTML 应该是模板的一部分。有什么理由不可以吗？

#myTemplate 模板是什么样的？

我在模板之外有一个包含单选按钮的列表。我不想刷新收音机，我想刷新下面的模板。

【参考方案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')
,

【讨论】：

"If jQuery is included on the page, each view has a $ function that runs queries scoped within the view's element. ... It's equivalent to running: view.$el.find(selector)

是的，我只是更喜欢使用this.$el.find，而不是可能需要额外解释的速记。

@CoryDanielson 我刚刚浏览了一个庞大的教程，实际上我偶然发现了一种更好的方法来处理这个问题。 this.$el.find('#quantities') 等价于 this.$('#quantities')。您可能应该使用无代码更新您的答案，因为它似乎是一个更清洁的解决方案。您可以在 2:50 youtube.com/watch?v=IOedHUl6-MQ

左右找到本视频末尾的参考资料

更新了~我喜欢在***上使用this.$el.find，因为它对Backbone的新手来说更明显。

【参考方案2】：

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

$(function () 

)

并使用以下代码

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