Creating Views with Plates

ResourcesView.js

var View = require("./View");

function ResourcesView(language) {
    View.call(this, this.getTemplate("#resourcesTemplate"), language);
}

ResourcesView.prototype = Object.create(View.prototype);

ResourcesView.prototype.render = function(resources) {
    return resources.map(function(res) {
        return View.prototype.render.call(this, {
            resourceType: res.getType(),
            resourceAmount: res.getAmount()
        });
    }).join("\n");
};

module.exports = ResourcesView;

SolarsystemView.js

var View = require("./View")
,   ResourcesView = require("./ResourcesView");

function SolarsystemView(language) {
    View.call(this, this.getTemplate("#solarsystemTemplate"), language);
    this.resources = new ResourcesView(language);
}

SolarsystemView.prototype = Object.create(View.prototype);

SolarsystemView.prototype.render = function(solarsystem) {
    return View.prototype.render.call(this, {
        solarsystemName: solarsystem.getName(),
        solarsystemSize: solarsystem.getSize(),
        solarsystemResources: this.resources.render(solarsystem.getResources())
    });
};

module.exports = SolarsystemView;

templates.html

      <div id="resourcesTemplate">
          <dl class="resources">
              <div class="resource">
                    <dt class="resourceType">Iron</dt>
                    <dd class="resourceAmount">100t</dd>
              </div>
          </dl>
      </div>
      <div id="solarsystemTemplate">
          <div class="solarsystem">
              <h2 class="solarsystemName">Solarsystem</h2>
              <div class="solarsystemResources">100t iron</div>
              <dl>
                  <dt>Diameter</dt><dd class="solarsystemSize">8999 <em title="10^12 m">terrametres</em></dd>
              </dl>
          </div>
      </div>

View.js

var Plates = require("Plates")
,   $ = jQuery = require("jQuery")
,   _ = require("underscore")
,   sprintf = require("sprintf");

function View(template, language) {
    this.language = language;
    this.template = template;
    this.map = new this.plates.Map();
}

View.prototype.getTemplate = function(selector) {
    return $(selector).html();
};

View.prototype.plates = Plates;
View.prototype.jQuery = jQuery;
View.prototype.sprintf = sprintf;

View.prototype.render = function(data) {
    return this.plates.bind(this.parseData(data, this.language), this.template, this.map);
};

View.prototype.parseData = function(data, language) {
    var self = this;
    var newData = {};
    _.each(data, function(value, key) {
        if (_.isArray(value)) {
            value.unshift(null, language[key]);
            newData[key] =  self.sprintf.apply(value);
        } else {
            newData[key] = language[key] ? self.sprintf(language[key], value) : value;
        }
    });
    return newData;
};

module.exports = View;

Hi,

Where/how is templates.html loaded? (trying to use this with node.js)

View.js L14, add it to your main html so templates get preloaded, maybe put some css to hide them. That's at least how I do it for now.