У меня есть позвоночник, который показывает пару статей /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;
}
);
Я согласен с Enders, и я хочу добавить, что:
render: function() {
$(this.el).html(this.template());
$(this.el).find('.showmore').click = function () {
// something you want
}
return this;
},
Я решил это сам, добавив это в функцию рендеринга на мой взгляд:
render: function() {
$(this.el).html(this.template());
$(this.el).append("<button class='btnwhite btnmore'>Show more</button>");
return this;
},
Если вы привязываете свой 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.