суббота, 29 ноября 2014 г.

Как запустить пришедшее в браузер приложение на Backbonejs без дополнительных ajax запросов

var AppointmentApp = new (Backbone.View.extend({
  Collections: {},
  Models: {},
  Views: {},
  events: {
    'click a[data-backbone]': function(e){
      e.preventDefault();
      Backbone.history.navigate(e.target.pathname, { trigger: true });
    }
  },
  start: function(bootstrap){
    this.appointments = new AppointmentApp.Collections.Appointments(bootstrap.appointments);
    var appointmentsView = new AppointmentApp.Views.Appointments({collection: this.appointments});
    $('#app').html(appointmentsView.render().el);
  }
}))({el: document.body});

серевер же старзу вставляет данные-колекцию в страницы и где-нибудь пониже мы вызываем:
var bootstrap = {
  appointments: [
    //сюда выводятся при рендеринге данные на сервере
  ]
}
$(function(){ AppointmentApp.start(bootstrap); })

Как не вязать вью на модель в new Backbone.js

В новом бекбоне появилось встроенное решение отвязки модели от разрешенного дома вьюхи.
Было:

  
var AppointmentView = Backbone.View.extend({
  template: _.template("<%= title %>"),
  initialize: function(){
    this.model.on('change:title', this.changedTitle, this);
  },
  render: function(){
    this.$el.html(this.template(this.model.attributes));
  },
  changedTitle: function(model, value, options){
    this.$('span').html(value);

    if (options.highlight !== false){
      this.$el.effect('highlight', {}, 1000); 
    }
  },
  remove: function() {
    Backbone.View.prototype.remove.apply(this, arguments);
    this.model.off(null, null, this);
  }
});

var appointmentView = new AppointmentView({model: someModel});

appointmentView.remove();


Стало(Added in Backbone 0.9.9):
var AppointmentView = Backbone.View.extend({
  template: _.template("<%= title %>"),
  initialize: function(){
    this.listenTo(this.model, 'change:title', this.changedTitle);
  },
  render: function(){
    this.$el.html(this.template(this.model.attributes));
  },
  changedTitle: function(model, value, options){
    this.$('span').html(value);

    if (options.highlight !== false){
      this.$el.effect('highlight', {}, 1000); 
    }
  }
});


var appointmentView = new AppointmentView({model: someModel});

appointmentView.remove();// автоматически вызовет appointmentView.stopListening();

суббота, 22 ноября 2014 г.

Для адаптив/респонсив/мобайл/флексибл дизайн

http://responsv.com/flexible-math/