1

我正在尝试使用 Handlebars.js 与 requirejs 和 Backbone.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>
4

1 回答 1

0

作为快速修复，您可以简单地在单击处理程序上返回 false 或 preventDefault()。这是一个修改后的jsfidlle。

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

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

于 2013-05-10T15:52:03.653 回答