Common SC View Pattern

common_view_pattern.js

MyApp.MyView = SC.View.extend({

  render: function(context) {
    context.push(this._renderHtml());
  },

  update: function(jQuery) {
    jQuery.html(this._renderHtml());
  },

  _renderHtml: function() {
    var p = this._getProperties(),
        html = [];

    if (p.title) {
      html = [
        "<div class='background' style='position: absolute; top: 0px; left: 0px; width: %@px; height: %@px'></div>".fmt(p.layout.width, p.layout.height),
        "<div style='position: absolute; top: 0px; left: 0px; width: %@px; height: %@px'>".fmt(p.layout.width, p.layout.height),
        "  <div class='title'>%@</div>".fmt(p.title),
        "  <img class='icon' src='%@' />".fmt(p.icon),
        "  <div class='description'>%@</div>".fmt(p.description),
        "</div>",
        (p.new_count > 0 ? "<div class='badge' style='position: absolute; top: 5px; right: 5px;'>%@</div>".fmt(p.new_count) : '')
      ];
    }

    return html.join("\n");
  },

  _getProperties: function() {
    return {
      layout: this.get('layout'),
      title: this.getPath('content.title'),
      icon: this.getPath('content.icon'),
      href: this.getPath('content.href'),
      new_count: this.getPath('content.new_count'),
      description: this.getPath('content.description')
    };
  }
  
});