backbone.js - Webshims placeholder is being hidden when appending dynamic content -
i'm trying put email list template using handlebars.js requirejs , backbone.js, initial rendering shows expected - single email input add icon add more.
var emailview = bb.view.extend({ tagname: 'ul', classname: 'emaillist', events: { "click .addemail" : "addemail", "click .deleteemail" : "deleteemail" }, initialize : function () { this.template = hb.compile(hbtemplate); }, render : function () { this.$el.htmlpolyfill(this.template(this.model.tojson())); this.updateicons(); return this; }, ...
the addemail handler (i've tried appendpolyfill(), appendpolyfillto, , current updatepolyfill(). produce same results. new line item added, placeholders disappear (this true controls outside of $el, appears whole page.)
addemail : function(e) { this.$el.append( this.template({}) ); this.$el.updatepolyfill(); this.updateicons(); }
what want existing controls maintain placeholder text , new 1 added showing placeholder text well. missing?
if helps, template looks ...
<li> <span class="requiredprompt">*</span> <img class="icon" alt="" src="/images/emailicon.png" /> <input type="email" class="emailaddress" value="" placeholder="email address" maxlength="50" required/> <a class="deleteemail" href="javascript:void(0)"> <img class="icon" alt="" src="/images/delfile.png" /> </a> <a class="addemail" href="javascript:void(0)"> <img class="icon enabled" alt="" src="/images/addfile.png" /> <img class="icon disabled" alt="" src="/images/addfile-disabled.png" /> </a> </li>
as quick fix can return false or preventdefault() on click handler. here modfied jsfidlle.
jquery('.addemail').click(function () { jquery('.emaillist').appendpolyfill(emailitem); return false; });
webshims thinks page unloaded , clears placeholders.
Comments
Post a Comment