text inside templates about component HOT 6 CLOSED

yeah tough call.. ideally we try to stay away from english etc but obviously that's not alway possible haha. I guess each component just needs to expose maybe an object containing the strings uses so they can be swapped, or we can try to get everyone using something like https://github.com/component/t, tough call. As long as they can easily be replaced then the application can handle the rest

from component.

staying library-agnostic would be great. we atm use gettext for easy collaboration with translation bureaus and sticking to an approved standard.

what i do now:

• leave strings out of the template
• pass a translation fn to the component
• fill in text through dom traversal and calls to that fn

this works with gettext and t. you alao get the benefit of having all translations take place in one code block.

is dom traversal the preferred way of doing this anyway, or will sth like mustache be integrated?

from component.

var $ = require('jquery');
var clazz = require('clazz');
var ee = require('events').EventEmitter;
var bind = require('bind');

function Card(pattern, t) {
  clazz.base(this);
  if (!t) t = function(s) { return s; };

  var dom = this.dom = $(require('./template'));

  dom.find('a').click(function(e) { e.preventDefault(); });

  dom.find('.patternchart') .click(bind(this, this.emit, 'open', pattern));
  dom.find('.watch')        .click(bind(this, this.emit, 'watch', pattern));
  dom.find('.products')     .click(bind(this, this.emit, 'products', pattern));
  dom.find('.details')      .click(bind(this, this.emit, 'open', pattern));

  dom.find('.category')     .text( pattern.breakout? t('Ausgeborchen') : t('Ausgebildet') );
  dom.find('.type')         .text( t(pattern.type)       );
  dom.find('.headline part').text( t('auf')              );
  dom.find('.instrument')   .text( t(pattern.instrument) );
  dom.find('.watch')        .text( t('Beobachten')       );
  dom.find('.products')     .text( t('Produkte')         );
  dom.find('.details')      .text( t('Details')          );
};

clazz.inherit(Card, ee);

Card.prototype.render = function() {
  return this.dom;
}

module.exports = Card;

from component.

there wont be anything integrated, probably best that we just provide some option(s) per component. Maybe we just do stuff like:

exports.strings = {
  category: 'Category',
  ...
}

and reference those. There wont be mustache or anything built in but I wrote https://github.com/visionmedia/minstache to have super light-weight stand-alone view functions that we can compile beforehand

from component.

ok, that looks good too.

from component.

exports.strings won't work when there is data from an API that is to be translated. If a component e.g. should print a color's name, like Your chosen background color is black it needs to translate that on the fly.

3 possibilities:

• assign the whole translation object to exports.strings: comp.strings = translations['en'] || clone(translations['en'])
• translate strings in the api response: res.color = t(res.color)
• let your api do the translation

With the passed t-function that is already covered.

from component.