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生成。这里发生了什么，因为我分析是花哨的盒子是在我的div中添加他的html所以cintkevnet在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的Live事件的要求。

BackBone文档非常广泛：delegateEvents

delegateEvents：使用jQuery的委托函数为视图中的DOM事件提供声明性回调。

...

与在渲染期间手动使用jQuery将事件绑定到子元素相比，使用delegateEvents提供了许多优势。在传递给jQuery之前，所有附加的回调都绑定到视图，因此在调用回调时，这将继续引用视图对象。当再次运行delegateEvents时，可能使用不同的事件哈希，所有回调都将被删除并重新委派 - 对于在不同模式下需要表现不同的视图非常有用。

Answer 2

在视图代码中使用live()来注册点击事件 -

文档 - live

如何在更改html后再次初始化视图

2 个答案: