Как снова инициализировать вид после изменения HTML

Question

У меня есть представление в backbone.js

App.Backbone.UserView = Backbone.View.extend({
        tagName: 'li',
        className: 'pp-entry group',
        template :_.template('<img src="i/pp-pic-8.png" class="pp-pic" alt="" /><a class="pp-pic-wrap show-fb" href="#pp-details-<%=username%>"></a>),
        templatedetails:_.template('`<div style="display:none"><div id="pp-details-<%=username%>" class="pp-details"><div class="cta clear"><input type="button" name="" value="Add to my Wallet" class="mar-right-10 addtowallet" /><input type="button" class="mar-right-10 addtogib" name="" value="Add to gib as link" /><input type="button" name="" value="Close" onclick="$.fancybox.close()" /></div></div><.div>'`)

        //Here is the click event defined

        events:{    
            "click .addtowallet":"addlinktowallet",
            "click .addtogib":"addasgiblink"
            },

       //Render contents

       render: function() { 
        $(this.el).html(this.template(this.model.toJSON()));
        $(this.el).attr('id', 'pp-'+this.model.get('username')); //This is used to set the id for the "li" tag

        $(this.el).append(this.templatedetails(this.model.toJSON())); //appending to the template
     $(".show-fb").fancybox();
        },

        //But when i am defining the function the click event does not get triggered

        addasgiblink: function(){
            alert("gib button clicked");        
            },

        addlinktowallet: function(){
            alert("wallet button clicked");     
            }
});

это генерация HTML.то, что происходит здесь, когда я анализирую, это необычная коробка - это добавление его html в мой div, так что clickkevnet на addlinktowallet и другие не работают.Подскажите, пожалуйста, что я могу сделать, чтобы он работал с fancybox?

<li id="pp-rahul" class="pp-entry group">
<img class="pp-pic" alt="" src="i/pp-pic-8.png">
<a class="pp-pic-wrap show-fb" href="#pp-details-rahul"></a>

<div style="display: none;">
 // added by fancybox 
<div style="width: auto; height: auto; overflow: auto; position: relative;">
<div id="pp-details-rahul" class="pp-details">
<img class="pp-pic" alt="" src="i/pp-pic-2.png">
<h4 class="pp-name">rahul</h4>
<p class="pp-attr">
</p>
<p class="pp-attr mar-btm-20">
       //here other html are coming .
</p>
<div class="cta clear">
   //here the html of button 
</div>
</div>
</div>
</div>
</li>

Answer 1

Как снова инициализировать представление после изменения html: снова вызвать функцию рендеринга.

Определенные события BackBone регистрируются как делегаты событий при рендеринге представления и устраняют необходимость вызова JQuery's Live.событие для конкретного элемента.

Документация BackBone очень обширна: DelegateEvents

DelegateEvents: использует функцию делегата jQuery для предоставления декларативных обратных вызовов для событий DOM в рамках.view.

...

Использование DelegateEvents дает ряд преимуществ по сравнению с использованием jQuery вручную для привязки событий к дочерним элементам во время рендеринга.Все прикрепленные обратные вызовы привязываются к представлению перед передачей в jQuery, поэтому, когда обратные вызовы вызываются, это продолжает ссылаться на объект представления.Когда DelegateEvents запускается снова, возможно, с другим хешем событий, все обратные вызовы удаляются и делегируются заново - полезно для представлений, которые должны вести себя по-разному в разных режимах.

Answer 2

используйте live() в вашем коде просмотра для регистрации события клика -

Документы - в прямом эфире