Question

我有一个骨干视图，显示了几个文章/ div。我想添加一个“显示更多”按钮。我的原始html看起来像这样：

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

现在，我通过一个视图加载文章，该视图在div＃ip中呈现。该按钮会被“覆盖”或“踢出”，并且不再可访问。那么我如何完成添加按钮？创建另一个视图？或者在视图中初始化/渲染它？

更新：这是我在路由器中的内容，它在初始化函数中：

this.recommendedArtistView = new RecommendedArtists({el:'#ip'});
self.recommendedArtistView.render();

我的观点如下：

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;

    }
    );

Answer 1

如果你将Backbone View绑定到div＃ip（el：“＃ip”我假设？），那么你可以使用events属性：

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

然后在视图中定义_onShowMore函数以响应它并执行某些操作。

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

render: function(){
   //Find the article node just below #ip (the current element for this view)
   var articlesContainer = this.$("article");
   //Empty it to re-render the collection of articles from scratch
   articleContainer.empty();
   this.collection.each(function(article){
     //toHTML could be a new Backbone View or just a article.get("content")
     articlesContainer.append(article.toHTML());
   });   
}

这样，元素的其余部分（此处为showmore按钮）不会被删除。因此，事件仍将受到约束，无需在DOM更新之间重新绑定它。

Answer 2

我自己通过在我的视图中将其添加到渲染功能来解决它：

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

Answer 3

我同意Enders，我想补充一点：

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

BackboneJS - 如何在视图中创建“显示更多”按钮

3 个答案: