Заполнитель Webshims скрывается при добавлении динамического содержимого

Я пытаюсь собрать шаблон списка адресов электронной почты. Используя 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>

placeholder handlebars.js dynamic-html backbone.js webshim
person Tony T Tubbs    schedule 09.05.2013    source источник
comment
Пример jsFiddle. Отображение подсказок-заполнителей скрыто (IE9) при добавлении динамического содержимого или даже просто при отображении тревога. Мне кажется, что это как-то связано с добавлением polyfiller.js в событие 'beforeunload', по крайней мере, я вижу в отладчике, что полифиллер вызывает 'triggerDomUpdate', связанный с isReady('WINDOWLOAD', true). Я не полностью понимаю, что это все о том, хотя.   -  person Tony T Tubbs    schedule 10.05.2013
comment
Мне удалось заставить поведение, которое я хочу, добавить свой собственный обработчик «beforeunload» в blur (), а затем очистить маркеры класса «.user-error». Я обновил пример jsFiddle с помощью «исправления». Разве это не должно работать по умолчанию?   -  person Tony T Tubbs    schedule 10.05.2013
comment
Я разработчик веб-схем, и мне это кажется странной ошибкой. Я посмотрю на это и исправлю это в ближайшее время. Так что не заморачивайся больше этим :-D   -  person alexander farkas    schedule 10.05.2013
comment
Только что исправил вашу ошибку. Если вы не добавите preventDefault, вы увидите небольшую вспышку. Это связано с тем, что IE говорит, что страница может быть выгружена. Так что лучше всего сохранить preventDefault   -  person alexander farkas    schedule 11.05.2013

Ответы (1)


arrow_upward
0
arrow_downward

В качестве быстрого исправления вы можете просто вернуть false или preventDefault() в обработчик кликов. Вот измененный jsfidlle.

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

Webshims считает, что страница выгружена, и очищает все заполнители.

person alexander farkas    schedule 10.05.2013
comment
Попытался вернуть false, что сработало в обработчике, в котором я это сделал, но в моем более крупном приложении есть так много мест, которые мне нужно обновить, поэтому лучше загрузить новую сборку. Теперь все работает как положено. Большое спасибо! - person Tony T Tubbs; 14.05.2013