Как использовать костяк с усами и неизвестным количеством просмотров?

Я использую усы для рендеринга серии изображений. Каждое изображение сопровождается вводом текста для установки подписи к изображению, кнопкой обновления для обновления подписи в базе данных через Ajax и кнопкой удаления для удаления изображения из базы данных (также через Ajax):

{{#logos}}
<div class="logo">
    <div class="logo-input">
        <input type="text" placeholder="Caption" value="{{caption}}" />
    </div>
    <div class="logo-buttons">
        <button>Update</button>
        <button>Delete</button>
    </div>
</div>
{{/logos}}

Я новичок в Backbone и не могу понять, как «связать» каждую кнопку обновления / удаления с соответствующим логотипом / заголовком. Как лучше всего это сделать, учитывая, что количество изображений неизвестно во время выполнения?


person Rob Johansen    schedule 08.06.2014    source источник


Ответы (1)


У вас две проблемы:

  1. Как узнать, какая кнопка нажата?
  2. Как узнать, с каким логотипом вы работаете?

Самый простой способ решить первую проблему - привязать к кнопкам класс:

<button type="button" class="update">Update</button>
<button type="button" class="delete">Delete</button>

Затем вы можете привязать события непосредственно к кнопкам, используя events представления:

events: {
    'click .update': 'update_caption',
    'click .delete': 'delete_caption'
}

Кроме того, вы всегда должны указывать атрибут type при использовании <button>, в спецификации указано, что <button type="button"> является значением по умолчанию, но некоторые браузеры вместо этого используют <button type="submit">. Если вы всегда указываете type="button", вам не нужно беспокоиться о том, до какой чепухи берутся браузеры.

Теперь вам нужно выяснить, с каким логотипом вы работаете.

Один из способов - продолжать использовать единое представление и прикрепить атрибут данных в удобном для поиска месте. Например:

{{#logos}}
    <div class="logo" data-logo="{{id}}">
        <!-- ... -->
    </div>
{{/logos}}

Затем вы можете делать такие вещи в обработчиках кликов:

update_caption: function(ev) {
    var id   = $(ev.currentTarget).closest('.logo').data('logo');
    var logo = this.collection.get(id);
    //...
}

Демо: http://jsfiddle.net/ambiguous/DwkPV/

В качестве альтернативы вы можете использовать одно дополнительное представление для каждого логотипа. Здесь у вас будет одно представление для каждого логотипа:

var LogoView = Backbone.View.extend({
    className: 'logo',
    events: {
        'click .update': 'update_caption',
        'click .delete': 'delete_caption'
    },
    //...
});

и шаблон без {{#logos}} цикла или внешнего логотипа <div>:

<div class="logo-input">
    <input type="text" placeholder="Caption" value="{{caption}}" />
</div>
<div class="logo-buttons">
    <button>Update</button>
    <button>Delete</button>
</div>

а обработчики кликов просто смотрят на this.model:

update_caption: function() {
    var logo = this.model;
    //...
}

Затем основное представление для перебора логотипов и рендеринга подвидов:

var LogosView = Backbone.View.extend({
    render: function() {
        this.collection.each(function(logo) {
            var v = new LogoView({ model: logo });
            this.$el.append(v.render().el);
        }, this);
        return this;
    },
    //...
});

Демо: http://jsfiddle.net/ambiguous/9A756/

person mu is too short    schedule 08.06.2014