Javascript BackboneJS-如何创建一个；“显示更多”；视图中的按钮

我有一个主干视图，其中显示了一些文章/div。我想添加一个“显示更多”按钮。我的原始html如下所示：

<div id="ip">
    <article>
         ...some other html code
    </article>
    <button class="showmore">show more</button>
</div>

define(['backbone','handlebars', 'text!templates/Recommended.html'],

    function(Backbone,Handlebars, Template) {


        'use strict';

        var RecommendedArtists = Backbone.View.extend({

            template: Handlebars.compile(Template),

            events: {
            },

            initialize: function () {
            },

            render: function() {
                $(this.el).html(this.template());
                return this;
            },


        });

        return RecommendedArtists;

    }
    );

我的观点是这样的：

<div id="ip">
    <article>
         ...some other html code
    </article>
    <button class="showmore">show more</button>
</div>

define(['backbone','handlebars', 'text!templates/Recommended.html'],

    function(Backbone,Handlebars, Template) {


        'use strict';

        var RecommendedArtists = Backbone.View.extend({

            template: Handlebars.compile(Template),

            events: {
            },

            initialize: function () {
            },

            render: function() {
                $(this.el).html(this.template());
                return this;
            },


        });

        return RecommendedArtists;

    }
    );

---

如果您将主干视图绑定到div#ip（el:#ip“我假定是”），那么您可以只使用events属性：

events: {
   "click .showmore": "_onShowMore"   
}

然后在您的视图中定义一个_onShowMore函数来响应它并做一些事情

如果这已经是您正在做的事情，那么问题在于渲染函数。没有理由替换整个视图元素的内容，在渲染中，您可以执行以下操作（假设您的文章位于传递给视图的主干集合中）：

---

这样，元素的其余部分（这里是showmore按钮）就不会被擦除。因此，事件仍将被绑定，无需在DOM更新之间重新绑定。

我通过在视图中的渲染函数中添加以下内容来解决此问题：

render: function() {
     $(this.el).html(this.template());
     $(this.el).append("<button class='btnwhite btnmore'>Show more</button>");
     return this;
},

render:function（）{
$（this.el）.html（this.template（））；
$（this.el）.append（“显示更多”）；
归还这个；
},

我同意，我想补充一点：

render: function() {
    $(this.el).html(this.template());
    $(this.el).find('.showmore').click = function () {
      // something you want
    }
    return this;
},

---

太好了！嗯，但我的问题之一仍然是按钮没有被渲染。我对这个很陌生，所以…这的全部要点是，如果按钮已经在DOM中，则不需要渲染它。Bacbkone视图能够处理现有DOM或创建自己的元素。如果您仍然有问题，那么我们需要看到更多的代码…嘘，我们可以看到模板吗？this.$el.html（template（））一定是罪魁祸首，因为它替换了#ip（包含按钮）的全部内容。因此，如果按钮不再在这里，我能理解的唯一原因是它不知何故不在模板中！按钮不能成为模板的一部分吗？@Vic是的，我在上面的例子中尝试过，但是在呈现视图模板后，按钮会被踢出，不再在DOM中为什么会被踢出？它应该会起作用。能否检查此.template（）在渲染函数中返回的内容？按钮在那里吗？最好用主干的事件哈希添加click事件