Handlebars helper для переноса слов

Задача: в шаблонах приложения с Emberjs сделать вывод определенной переменной в шаблоне (Handlebars) так, что бы перенос ее значения был по символам «-» и «.». В данный момент есть «word-wrap: break-word;», который делает перенос в местах, где просто слово упирается в край родительского контейнера. Да, совместимость со старыми браузерами не требуется.

С переносом по «-» просто. Браузер и сам умеет делать перенос по дефису. А вот как быть с точками? Помочь тут может тэг wbr, который необходимо вставить после каждой точки. Поскольку данная задача решается не в рамках одного элемента в большом проекте, а в глобальном плане, не будем делать метод-форматировщик для одной view. Напишем небольшой helper для Handlebars, который потом можно будет использовать где угодно.

App — это Ember.Application.
Em — псевдоним для Ember.

Обертка для создания helper’ов:

/*
 * Helper function for bound property helper registration
 * @params name {String} - name of helper
 * @params view {Em.View} - view
 */
App.registerBoundHelper = function(name, view) {
  Em.Handlebars.registerHelper(name, function(property, options) {
    options.hash.contentBinding = property;
    return Em.Handlebars.helpers.view.call(this, view, options);
  });
};

Наш helper:

/**
 * Return formatted string with inserted <code>wbr</code>-tag after each dot
 *
 * @param {String} content
 *
 * Examples:
 *
 * returns 'apple'
 * {{formatWordBreak 'apple'}}
 *
 * returns 'apple.<wbr />banana'
 * {{formatWordBreak 'apple.banana'}}
 *
 * returns 'apple.<wbr />banana.<wbr />uranium'
 * {{formatWordBreak 'apple.banana.uranium'}}
 */
App.registerBoundHelper('formatWordBreak', Em.View.extend({
  tagName: 'span',
  template: Em.Handlebars.compile('{{{view.result}}}'),
 
  /**
   * @type {string}
   */
  result: function() {
    return this.get('content').replace(/\./g, '.<wbr />');
  }.property('content')
}));

Helper делает в точности то, что было указано в задании. Для корректного отображения переносов во всех браузерах необходимо добавить в css такое:

wbr {
  display: inline-block;
}

Вот теперь точно все. Задача решена.

Оставить комментарий

Top ↑ | Main page | Back