Mustache.js rendering a template with events

http://zccst.iteye.com/blog/2183111

Recently encountered such a problem, preview content can be clicked, the problem is through $. Mustache.render ("TemplateID", data) renders the returned result as a string.

There are two implementations: one is to bind an event in backbone events, and one is to use jquery's $ (HTML) for the returned string. Find ("#target"). Click ();

Scenario One: Bind an event in events in backbone

varPreviewview =Backbone.View.extend ({events: {' Click. New_bt a ': ' Democlick ',}, Initialize:function(options) { This. Model.bind (' Change:list ', This. Renderpreviewview, This);  This. Renderpreviewview (); }, Renderpreviewview:function(){             This. $el. empty (); vardata = This. Model.tojson (); //Method 1: Use $. Mustache.render ();            varHTML = $. Mustache.render (' crowncommonkeypreview-pc ', This. Formatdata (data.list));  This. $el. html (HTML); //Method 2: Use $ ("#xx"). Mustache ("", data);            //This . $el. Empty (). Mustache (' crowncommonkeypreview-pc ', This.formatdata (data.list));            //Method 3: Use native mustache        },...})

Principle: Backbone uses an event proxy, which populates HTML into an El, which is the natural proxy for elements bound events in HTML.

Scenario Two: Use jquery's $ (HTML) for the returned string. Find ("#target"). Click ();

varPreviewview =Backbone.View.extend ({events: {}, Initialize:function(options) { This. Model.bind (' Change:list ', This. Renderpreviewview, This);  This. Renderpreviewview (); }, Renderpreviewview:function(){             This. $el. empty (); vardata = This. Model.tojson (); //Method 1: Use $. Mustache.render ();            varHTML = $. Mustache.render (' crowncommonkeypreview-pc ', This. Formatdata (data.list));  This. $el. html (HTML);  This. $el. Find (". NEW_BT a"). Click (function() {alert ("AAA")}); //Method 2: Use $ ("#xx"). Mustache ("", data);            //This . $el. Empty (). Mustache (' crowncommonkeypreview-pc ', This.formatdata (data.list));            //Method 3: Use native mustache        },...})

Mustache.js rendering a template with events