Написание сложных интерфейсов с Spine.js

[@Meliborn]

Как грибы

[@GearHead]

какой полезный и важный комментарий.

[@cbone]

Ваш тоже, как и мой…

[@k12th]

Книжка у него тоже хорошая — он там и Spine подробно расписывает — что, откуда, и почему, и Backbone, и JavascriptMVC, и ряд других вопросов.

[@javascript]

Взгляните на исходный код примера приложения, и решите для себя.

Взглянул на исходный код примера, и решил для себя — я за исходный код примера на Backbone.

(function() {
  var $, Task, TaskApp, Tasks;
  var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) {
    for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; }
    function ctor() { this.constructor = child; }
    ctor.prototype = parent.prototype;
    child.prototype = new ctor;
    child.__super__ = parent.prototype;
    return child;
  }, __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
  $ = jQuery;
  Task = (function() {
    __extends(Task, Spine.Model);
    function Task() {
      Task.__super__.constructor.apply(this, arguments);
    }
    Task.configure("Task", "name", "done");
    Task.extend(Spine.Model.Local);
    Task.active = function() {
      return this.select(function(item) {
        return !item.done;
      });
    };
    Task.done = function() {
      return this.select(function(item) {
        return !!item.done;
      });
    };
    Task.destroyDone = function() {
      var rec, _i, _len, _ref, _results;
      _ref = this.done();
      _results = [];
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        rec = _ref[_i];
        _results.push(rec.destroy());
      }
      return _results;
    };
    return Task;
  })();
  Tasks = (function() {
    __extends(Tasks, Spine.Controller);
    Tasks.prototype.events = {
      "change   input[type=checkbox]": "toggle",
      "click    .destroy": "remove",
      "dblclick .view": "edit",
      "keypress input[type=text]": "blurOnEnter",
      "blur     input[type=text]": "close"
    };
    Tasks.prototype.elements = {
      "input[type=text]": "input"
    };
    function Tasks() {
      this.render = __bind(this.render, this);      Tasks.__super__.constructor.apply(this, arguments);
      this.item.bind("update", this.render);
      this.item.bind("destroy", __bind(function() {
        return this.trigger('destroy');
      }, this));
    }
    Tasks.prototype.render = function() {
      this.replace($("#taskTemplate").tmpl(this.item));
      return this;
    };
    Tasks.prototype.toggle = function() {
      this.item.done = !this.item.done;
      return this.item.save();
    };
    Tasks.prototype.remove = function() {
      return this.item.destroy();
    };
    Tasks.prototype.edit = function() {
      this.el.addClass("editing");
      return this.input.focus();
    };
    Tasks.prototype.blurOnEnter = function(e) {
      if (e.keyCode === 13) {
        return e.target.blur();
      }
    };
    Tasks.prototype.close = function() {
      this.el.removeClass("editing");
      return this.item.updateAttributes({
        name: this.input.val()
      });
    };
    return Tasks;
  })();
  TaskApp = (function() {
    __extends(TaskApp, Spine.Controller);
    TaskApp.prototype.events = {
      "submit form": "create",
      "click  .clear": "clear"
    };
    TaskApp.prototype.elements = {
      ".items": "items",
      ".countVal": "count",
      ".clear": "clear",
      "form input": "input"
    };
    function TaskApp() {
      this.renderCount = __bind(this.renderCount, this);
      this.addAll = __bind(this.addAll, this);
      this.addOne = __bind(this.addOne, this);      TaskApp.__super__.constructor.apply(this, arguments);
      Task.bind("create", this.addOne);
      Task.bind("refresh", this.addAll);
      Task.bind("refresh change", this.renderCount);
      Task.fetch();
    }
    TaskApp.prototype.addOne = function(task) {
      var view;
      view = new Tasks({
        item: task
      });
      return this.items.append(view.render().el);
    };
    TaskApp.prototype.addAll = function() {
      return Task.each(this.addOne);
    };
    TaskApp.prototype.create = function(e) {
      e.preventDefault();
      Task.create({
        name: this.input.val()
      });
      return this.input.val("");
    };
    TaskApp.prototype.clear = function() {
      return Task.destroyDone();
    };
    TaskApp.prototype.renderCount = function() {
      var active, inactive;
      active = Task.active().length;
      this.count.text(active);
      inactive = Task.done().length;
      if (inactive) {
        return this.clear.show();
      } else {
        return this.clear.hide();
      }
    };
    return TaskApp;
  })();
  $(function() {
    return new TaskApp({
      el: $("#tasks")
    });
  });
}).call(this);

[@BlackFoks]

Не, ну так это ведь то, что CoffeeScript нагенерил. Посмотрите реальные исходники на гитхабе, там же ссылки есть.

[@krovatti]

Мои глаза…

[@tonic]

Мне spinejs понравился из-за того что он на coffeescript сделан. А вы в примерах использовав javascript убрали всю его фишку.

[@kuzemchik]

«Spine во многом как backbone, но не backbone. Не может всего, что может backbone, но зато он легче».

Как по мне реализация на CoffeeScript это основная фишка Spine.

Меня Backbone устраивает тем, что он не мешает (и в каком-то смысле, все таки, помогает) работать с underscore.js.

[@Keyten]

Underscore — это, если не ошибаюсь, вообще зависимость Backbone.

[@kuzemchik]

Не ошибаетесь. Но использовать его например вместе с Javascript MVC прямо скажем неудобно.

[@SamDark]

Да, было бы неплохо. Linkedin, кстати, делал анализ кучи MVC-решений и выбрали в итоге именно Ember.

[@brabadu]

Документация у Spine.js — катастрофа. Она в дичайших деталях объясняет все подряд, а общего и простого представления не дает.

Когда только про него начал читать схватился за голову. А когда перешел к реальному использованию понял, что все чрезвычайно просто и благодаря небольшому объему кода легко прямо в исходниках смотреть что где и как происходит.

[@tytar]

Прошу прощения, но кажется в Backbone нет контроллеров, или что то путаю?

[@systemiv]

Хоть х… назови, главное облизывай)
Там контроллеры в обычном понимании называются представлениями.