Question

I'm trying to put together an email list template Using Handlebars.js with requirejs and Backbone.js, the initial rendering shows up as expected - a single email input with an add icon to 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, and the current updatePolyFill(). All produce the same results. The new line item is added, but all placeholders disappear (this is true for controls outside of $el, it appears to be the whole page.)

    addEmail : function(e) {
        this.$el.append( this.template({}) );
        this.$el.updatePolyfill();
        this.updateIcons();
    }

What I want is for existing controls to maintain their placeholder text and the new one added showing the placeholder text as well. What am I missing?

If it helps, template looks like this ...

<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>
Was it helpful?

Solution

As a quick fix you can simply return false or preventDefault() on your click handler. Here is a modfied jsfidlle.

jQuery('.addEmail').click(function () {
    jQuery('.emailList').appendPolyfill(emailItem);
    return false;
});

Webshims thinks the page unloaded and clears all placeholders.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top