bee.js widget proposition

widget.js

define(["bee/widget", "app/models/transport", "app/modules/cargo-log"], function(Widget, Transport, CargoLog) {
  "use strict";

  var Transports = new Widget({
    root: "#transports-sidebar",

    extends: [CargoLog],

    init: function() {
      this.transports = [];
      this.elements   = [];
    },

    events: {
      "click:.transport": "toggleTransport"
    },

    templates: {
      main: '<div class="transport">\
          <div class="info">\
            <span class="number">{{= it.get("number") }}</span>\
            <span class="count">{{= it.get("cargos").length }}</span>\
          </div>\
          <div class="cargos"></div>\
        </div>',

      cargos: '{{~it :value:index }}<div class="cargo">{{= value.cargo.number }}</div>{{~}}'
    },

    listeners: {
      "transport:create": function(ev) {
        var transport = ev.target,
            html      = this.render(transport),
            id        = transport.get("id");

        this.transports[id] = transport;
        this.elements[id]   = html;

        this.root.append(html);
      },

      "transport:show": function(ev) {
        var transport = ev.target,
            element   = this.elements[transport.get("id")],
            cargos    = this.render("cargos", transport.get("cargos"));

        element.addClass("active");
        element.find(".cargos").html(cargos);
      }
    },

    toggleTransport: function() {
      var element   = $(this),
          transport = this.transports[el.data("id")];

      el.hasClass("active") ? transport.fire("hide") : transport.fire("show");
    }
  });

  return Transports;
});