BackboneJS - Как создать кнопку «Показать больше» внутри представления

0

У меня есть позвоночник, который показывает пару статей /div. Я хочу добавить кнопку "показать больше". Мой оригинальный html выглядел так:

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

теперь я загружаю статьи через представление, которое получается в div # ip. Кнопка получает вид "перезаписывается" или "выбивается" и больше не доступна. Итак, как мне добавить кнопку? Создать другой вид? или инициализировать/отобразить его в самом представлении?

UPDATE: Вот что я имею в своем маршрутизаторе, внутри функции инициализации:

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;

    }
    );
Теги:
backbone.js

3 ответа

0

Я согласен с Enders, и я хочу добавить, что:

render: function() {
    $(this.el).html(this.template());
    $(this.el).find('.showmore').click = function () {
      // something you want
    }
    return this;
},
  • 0
    вероятно, лучше добавить событие click с хэшем событий в магистрали
0

Я решил это сам, добавив это в функцию рендеринга на мой взгляд:

render: function() {
     $(this.el).html(this.template());
     $(this.el).append("<button class='btnwhite btnmore'>Show more</button>");
     return this;
},
  • 0
    кнопка не может быть частью шаблона?
  • 0
    @Vic да, я пробовал это, как в примере выше, но <button> вылетает и больше не находится в DOM после рендеринга шаблона представления
Показать ещё 1 комментарий
0

Если вы привязываете свой 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.

  • 0
    Замечательно! Хм, но одна из моих проблем заключается в том, что кнопка не отображается. Я довольно новичок в этом, так что ...
  • 0
    Весь смысл в том, что вам не нужно отображать кнопку, если она уже находится в DOM. Bacbkone View может работать с существующими DOM или создавать свои собственные элементы. Если у вас все еще есть проблемы, нам нужно увидеть больше кода ...
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню