Привязка магистрали к динамическим элементам - PullRequest
Новая
       10

Привязка магистрали к динамическим элементам

0 голосов
/ 15 марта 2012

У нас есть слайд-шоу в нашем коде, и я хочу сгенерировать кнопки на основе количества изображений.

Я перебираю изображения для каждого элемента: 

renderImageButtons: function() {
  images = this.model.attributes.images;
  for (i = 0; i <= images.length; i++) {
    this.$('.image_buttons').append("<li class='"+(i == 0 ? 'selected':'')+"' rel='"+i+"'></li>")
  }
},

и прикрепление события так: 

events: {
  'click .image_buttons li': 'changeImage'
},

Теперь, когда я щелкаю li (который представляет собой небольшой кружок), я хочу отобразить определенное изображение в этом массиве, но я не уверен, как это сделать с помощью Backbone. Обычно я разбираю rel off кнопку и затем загружаю ее соответствующим образом, но я не уверен, как получить доступ к этой информации в Backbone или есть ли лучший способ сделать это.

В настоящее время у меня есть функция поворота изображения, которая автоматически поворачивает изображения: 

rotateImage: function() {

  images = this.model.attributes.images;
  image_index = this.model.attributes.current_image_index;

  if (images && image_index != null) {

    image_index++;

    if (image_index > images.length-1 || !images[image_index]) {
      image_index = 0;
    }

    this.model.set({current_image_index: image_index});
  }
},

А теперь мне нужна функция changeImage, но я тут потерян: 

changeImage: function() {
  alert($(this).toString());
}

1 Ответ

1 голос
/ 15 марта 2012

Решением было бы

  • , привязать изменение к вашему свойству current_image_index на ваш взгляд render метод
  • с помощью функции changeImage выбрать relи установите свойство модели

Например: 

ImagesView = Backbone.View.extend({
    events: {
        'click li': 'changeImage'
    },

    initialize: function() {
        this.model.on("change:current_image_index",this.render,this);
    },
    render: function() {
        var images = this.model.get("images"), selected=this.model.get("current_image_index");

        this.$el.html("");
        _.each(images, function(model,ix) {
            this.$el.append("<li class='"+(ix == selected ? 'selected':'')+"' rel='"+ix+"'>"+ix+"</li>")
        },this);
    },

    changeImage: function(e) {
        var $li=$(e.currentTarget).closest("li");
        this.model.set({current_image_index:$li.attr("rel")});
    }
});

var model=new Backbone.Model({
    images:[{id:1},{id:2}],
    current_image_index:0
});
var view= new ImagesView({
    el: $("ul"),
    model:model
});

view.render();

И скрипку http://jsfiddle.net/XFTf4/2/

(возможно) более чистое решение - обработать изображениеКоллекция и выбранная модель вместо индекса, но это может быть излишним для ваших нужд.

...