Question

我正在尝试整理一个电子邮件列表模板使用带有requirejs和Backbone.js的Handlebars.js，初始渲染显示为预期 - 一个带有添加图标的电子邮件输入以添加更多。

    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;
    },
    ...

addEmail处理程序（我尝试过appendPolyfill（），appendPolyFillTo和当前的updatePolyFill（）。所有产生相同的结果。添加了新的行项目，但所有占位符都消失了（对于$以外的控件都是如此） el，它似乎是整个页面。）

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

我想要的是现有控件维护其占位符文本，添加新文本也显示占位符文本。我错过了什么？

如果有帮助，模板看起来像这样......

<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>

Answer 1

作为快速修复，您只需在Click处理程序上返回false或preventDefault（）即可。这是一个修改过的jsfidlle。

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

Webshims认为该页面已卸载并清除所有占位符。

附加动态内容时隐藏了Webshims占位符

1 个答案: