Handlebars.js: рдХреНрдпрд╛ рдХрд╕реНрдЯрдо рд╕рд╣рд╛рдпрдХ рдХреЗ рдЕрдВрджрд░ рд╕реЗ рдЖрдВрд╢рд┐рдХ рдкреНрд░рд╕реНрддреБрдд рдХрд░рдирд╛ рд╕рдВрднрд╡ рд╣реИ?

рдХреЛ рдирд┐рд░реНрдорд┐рдд 10 рдЬреБрд▓ре░ 2015  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: handlebars-lang/handlebars.js

рдореИрдВ рдирд┐рдореНрдирд▓рд┐рдЦрд┐рдд рдХреА рддрд░рд╣ рдХреБрдЫ рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ -

Handlebars.registerHelper('include', function(path, options) {
  return Handlebars.renderPartial(path, context, hash); //this is a js interface which matches the hbs partial interface
});

рдЗрд╕реЗ рдЪрд╛рд╣рдиреЗ рдХрд╛ рдореЗрд░рд╛ рдкреНрд░рд╛рдердорд┐рдХ рдХрд╛рд░рдг рдпрд╣ рд╣реИ рдХрд┐ рдореЗрд░реЗ рдкрд╛рд╕ рдХреБрдЫ рдЕрдВрд╢ рд╣реИрдВ рдЬрд┐рдиреНрд╣реЗрдВ рдореИрдВ рд╕рд╣рд╛рдпрдХ рд╡рд╛рдХреНрдпрд╡рд┐рдиреНрдпрд╛рд╕ рдХреЗ рд╕рд╛рде рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВред рдореЗрд░рд╛ рд╕рд╣рд╛рдпрдХ рдЖрдВрд╢рд┐рдХ рдХрд╛рд░реНрдпрдХреНрд╖рдорддрд╛ рднреА рдмрдврд╝рд╛ рд╕рдХрддрд╛ рд╣реИред рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рдпрд╣ рдмреНрд▓реЙрдХ рд╕рд╛рдордЧреНрд░реА рд▓реЗ рд╕рдХрддрд╛ рд╣реИ рдФрд░ рдЗрд╕реЗ рдПрдХ рд╕рдВрджрд░реНрдн рд╕рдВрд╕реНрдХрд░рдг рдХреЗ рд░реВрдк рдореЗрдВ рдЖрдВрд╢рд┐рдХ рдЯреЗрдореНрдкрд▓реЗрдЯ рдореЗрдВ рдПрдХ var рдХреЗ рд░реВрдк рдореЗрдВ рдкрд╛рд╕ рдХрд░ рд╕рдХрддрд╛ рд╣реИред

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдЖрдк рд╕рд╣рд╛рдпрдХ рдХреЗ рдЕрдВрджрд░ рдХрд┐рд╕реА рднреА рд╕реНрдЯреНрд░рд┐рдВрдЧ рдХреЛ рд╕рдВрдХрд▓рд┐рдд рдФрд░ рдкреНрд░рд╕реНрддреБрдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдЗрд╕рд▓рд┐рдП рдпрджрд┐ рдЖрдкрдиреЗ рдкрд╣рд▓реЗ рд╣реА Handlebars.registerPartial('my-partial', 'my partial content') рдХреЗ рд╕рд╛рде рдЕрдкрдиреЗ рд╣рд┐рд╕реНрд╕реЗ рдЬреЛрдбрд╝ рд▓рд┐рдП рд╣реИрдВ, рддреЛ рдЖрдк рдпрд╣ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ...

Handlebars.registerHelper('include', function (path, options) {
  var partial = Handlebars.partials[path];
  if (typeof partial !== 'function') {
    partial = Handlebars.compile(partial);
  }
  return partial(context); // build up the context some how
});

рдлрд┐рд░ рдЗрд╕реЗ {{include 'my-partial'}} рдЬреИрд╕реЗ рд╣реИрдВрдбрд▓рдмрд╛рд░ рдореЗрдВ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВред

рд╕рднреА 4 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдЖрдк рд╕рд╣рд╛рдпрдХ рдХреЗ рдЕрдВрджрд░ рдХрд┐рд╕реА рднреА рд╕реНрдЯреНрд░рд┐рдВрдЧ рдХреЛ рд╕рдВрдХрд▓рд┐рдд рдФрд░ рдкреНрд░рд╕реНрддреБрдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдЗрд╕рд▓рд┐рдП рдпрджрд┐ рдЖрдкрдиреЗ рдкрд╣рд▓реЗ рд╣реА Handlebars.registerPartial('my-partial', 'my partial content') рдХреЗ рд╕рд╛рде рдЕрдкрдиреЗ рд╣рд┐рд╕реНрд╕реЗ рдЬреЛрдбрд╝ рд▓рд┐рдП рд╣реИрдВ, рддреЛ рдЖрдк рдпрд╣ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ...

Handlebars.registerHelper('include', function (path, options) {
  var partial = Handlebars.partials[path];
  if (typeof partial !== 'function') {
    partial = Handlebars.compile(partial);
  }
  return partial(context); // build up the context some how
});

рдлрд┐рд░ рдЗрд╕реЗ {{include 'my-partial'}} рдЬреИрд╕реЗ рд╣реИрдВрдбрд▓рдмрд╛рд░ рдореЗрдВ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВред

рдзрдиреНрдпрд╡рд╛рдж @doowb

рдХреНрдпрд╛ Handlebars.compile рд╣реИрдВрдбрд▓рдмрд╛рд░-рд░рдирдЯрд╛рдЗрдо рдХреЗ рднреАрддрд░ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ?

рдореБрдЭреЗ рдЕрднреА рднреА рд╣реИрд╢ рдкреИрд░рд╛рдо рдкрд╛рд╕ рдХрд░рдиреЗ рдХрд╛ рдПрдХ рддрд░реАрдХрд╛ рдЪрд╛рд╣рд┐рдП

рд╣реИрдВрдбрд▓рдмрд╛рд░ рд░рдирдЯрд╛рдЗрдо рд╕реНрдкрд╖реНрдЯ рд░реВрдк рд╕реЗ compile рд╡рд┐рдзрд┐ рдХреЛ рдЫреЛрдбрд╝ рджреЗрддрд╛ рд╣реИред рдЖрдк рдЕрдкрдиреЗ рд╕реНрд╡рдпрдВ рдХреЗ рд╣реИрд╢ рдкреИрд░рд╛рдореАрдЯрд░ рдХреЛ рдХреЙрд▓ рдореЗрдВ рдЖрдВрд╢рд┐рдХ рд░реВрдк рд╕реЗ рдкрд╛рд╕ рдХрд░рдХреЗ рдкрд╛рд╕ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред

рдЗрд╕реЗ рдмрдВрдж рдХрд░рдирд╛ рдХреНрдпреЛрдВрдХрд┐ рдпрд╣ рд╕реБрд╡рд┐рдзрд╛ рдЕрдиреБрд░реЛрдз рдХрд╛ рдирд╣реАрдВ рдмрд▓реНрдХрд┐ рдХреБрдЫ рджрд┐рдиреЛрдВ рд╕реЗ рдХреЛрдИ рдЧрддрд┐рд╡рд┐рдзрд┐ рдирд╣реАрдВ рд╣реИред

рдореБрдЭреЗ рдкрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рдмрдВрдж рдФрд░ рдкреБрд░рд╛рдирд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдЗрд╕рдХрд╛ рдХреЛрдИ рдЬрд╡рд╛рдм рдпрд╛ рдЙрджрд╛рд╣рд░рдг рдирд╣реАрдВ рд╣реИред рдореИрдВ рдпрд╣ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рдФрд░ рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдореИрдВрдиреЗ рдХреЛрд╢рд┐рд╢ рдХреА рд╕рд╛рдзрд╛рд░рдг рдорд╛рдорд▓реЛрдВ рдХреЗ рд▓рд┐рдП рдХрд╛рдо рдХрд┐рдпрд╛ рд╣реИ - рдореИрдВрдиреЗ рдЬрдЯрд┐рд▓ рдорд╛рдорд▓реЛрдВ рдХреА рдХреЛрд╢рд┐рд╢ рдирд╣реАрдВ рдХреА рд╣реИред

<!-- compiled as Handlebars.template.displayName -->
{#each this}}
Hello {{#if isMale}}Mr.{{else}}Mrs.{{/if}} {{renderPartial nameRenderer this}}
{{/each}}
Handlebars.registerPartial("capital", "{{captialize firstname}} {{captialize middleName}} {{captialize lastname}}");
Handlebars.registerPartial("midinit", "{{upper firstname}} {{upper middleName}} {{upper lastname}}");
Handlebars.registerPartial("midinit", "{{firstname}} {{firstChar middleName}} {{lastname}}");
Handlebars.registerHelper('renderPartial', function(partial, context) {
    return Handlebars.compile(Handlebars.partials[partial])(context);
});
Handlebars.registerHelper('firstChar', function(name) {
    return name.substring(0,1);
});
Handlebars.registerHelper('upper', function(name) {
    return name.toUpperCase();
});
Handlebars.registerHelper('captialize', function(name) {
    return name.substring(0,1).toUpperCase() + name.substring(1);
});
var data = [{
  isMale: true,
  firstname: "david",
  middleName: "tom",
  lastname: "henry",  
  nameRenderer: "capital"
}, {
  isMale: true,
  firstname: "david",
  middleName: "tom",
  lastname: "henry",  
  nameRenderer: "midinit"
}, {
  isMale: false,
  firstname: "nancy",
  middleName: "tracey",
  lastname: "henry",  
  nameRenderer: "uppercased"
}];

Handlebars.template.displayName(data);
/* returns
Hello Mr. David Tom Henry
Hello Mr. david t henry
Hello Mrs. NANCY TRACEY HENRY
*/
рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

ShintaroOkuda picture ShintaroOkuda  ┬╖  7рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

morgondag picture morgondag  ┬╖  5рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

snimavat picture snimavat  ┬╖  5рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

fcpauldiaz picture fcpauldiaz  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

nknapp picture nknapp  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ