рдореЗрд░реЗ рдкрд╛рд╕ рдПрдХ рд╣реА рдбреАрдЖрдИрдЖрд░ рдореЗрдВ рдПрдХ рд╕рд╛рдзрд╛рд░рдг рдЖрдВрд╢рд┐рдХ, рдЯреЗрдореНрдкрд▓реЗрдЯ рд╣реИред
рджреЛрдиреЛрдВ рдХреА рдХреЛрд╢рд┐рд╢ рдХреА (рдЬрд╣рд╛рдВ рд╣реЗрдбрд░.рдПрдЪрдЯреАрдПрдордПрд▓.рдПрдордпреВ рдореБрдЦреНрдп рдЯреЗрдореНрдкрд▓реЗрдЯ рдХреЗ рд╕рдорд╛рди рдирд┐рд░реНрджреЗрд╢рд┐рдХрд╛ рдореЗрдВ рдореМрдЬреВрдж рд╣реИ
{{рдлреВ}}
{{
рдХреБрдЫ рднреА рдирд╣реАрдВ, рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ рд▓реЗрдХрд┐рди рдЗрд╕рдореЗрдВ рд╡рд╣ рд╢рд╛рдорд┐рд▓ рдирд╣реАрдВ рд╣реИ рдЬреЛ рд╣реЗрдбрд░ рдореЗрдВ рд╣реИред html
рдЖрдВрд╢рд┐рдХ рдХрд╛рдо рдХрд░рддреЗ рд╣реИрдВ, рдЙрджрд╛рд╣рд░рдг/рдирд┐рд░реНрджреЗрд╢рд┐рдХрд╛ рдореЗрдВ рдЙрджрд╛рд╣рд░рдгреЛрдВ рдХреЗ рд╕рд╛рде-рд╕рд╛рде рд░реАрдбрдореА рдореЗрдВ рджрд╕реНрддрд╛рд╡реЗрдЬрд╝ рджреЗрдЦреЗрдВред Mustache.js рд╕реНрд╡рдЪрд╛рд▓рд┐рдд рд░реВрдк рд╕реЗ рдЙрд╕реА рдирд┐рд░реНрджреЗрд╢рд┐рдХрд╛ рдореЗрдВ рдХрд┐рд╕реА рднреА рдлрд╛рдЗрд▓ рдХреЛ рд▓реЛрдб рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИ (рдХреНрдпреЛрдВрдХрд┐ рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдореЗрдВ рдХреЛрдИ рдлрд╝рд╛рдЗрд▓-рдЖрдИрдУ рдирд╣реАрдВ рд╣реИ :)
"рдХрд┐рд╕реА рднреА рдлрд╛рдЗрд▓ рдХреЛ рд╕реНрд╡рдЪрд╛рд▓рд┐рдд рд░реВрдк рд╕реЗ рд▓реЛрдб" рдХрд╛ рдХреНрдпрд╛ рдЕрд░реНрде рд╣реИ? рддреЛ рдЪрд▓рд┐рдП рдХрд╣рддреЗ рд╣реИрдВ рдХрд┐ рдореЗрд░реЗ рдкрд╛рд╕ рд╣реИ:
рджреЗрдЦреЗрдВ.рдЬреЗрдПрд╕
рдЯреЗрдореНрдкреНрд▓реЗрдЯ/рд╣реЗрдбрд░.html.mu
рдЯреЗрдореНрдкрд▓реЗрдЯреНрд╕/body.html.mu
view.js рдореЗрдВ, рдореЗрд░реЗ рдкрд╛рд╕ рд╣реИ: Mu.templateRoot = './templates';
рддреЛ рдореИрдВ "header.html" рдкреНрд░рд╕реНрддреБрдд рдХрд░рддрд╛ рд╣реВрдВред
рд╣реЗрдбрд░.рдПрдЪрдЯреАрдПрдордПрд▓.рдПрдордпреВ рд╣реИ
{{>body.html}}
рд▓реЗрдХрд┐рди рдпрд╣ рдХрднреА рд╢рд╛рдорд┐рд▓ рдирд╣реАрдВ рд╣реЛрддрд╛ рд╣реИред рдХреНрдпрд╛ рдореИрдВ рдХреБрдЫ рднреВрд▓ рд░рд╣рд╛ рд╣реВрдБ? рдХреНрдпрд╛ рдХреБрдЫ рдирд┐рд░реНрджреЗрд╢рд┐рдХрд╛ рдкрде рдЪрд▓ рд░рд╣рд╛ рд╣реИ?
рдХреНрдпрд╛ рдЖрдк рдореБрдЭреЗ рдПрдХ рд╡рд┐рд╢рд┐рд╖реНрдЯ рдЬреЗрдПрд╕ рдЙрджрд╛рд╣рд░рдг рдкрд░ рдЗрдВрдЧрд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдЬреЛ рдЖрдВрд╢рд┐рдХ рдЪрд▓рд╛рддрд╛ рд╣реИ? рдореИрдВ рдорд╛рд░реНрдХрдЕрдк .html.mu рджреЗрдЦрддрд╛ рд╣реВрдВ рд▓реЗрдХрд┐рди рдХреЛрдИ рдЬреЗрдПрд╕ рдирд╣реАрдВ рдЬреЛ рдЙрдирдХреЗ рд╕рд╛рде рдХреБрдЫ рднреА рдХрд░рддрд╛ рд╣реИ ...
рдзрдиреНрдпрд╡рд╛рдж,
рдзрдиреНрдпрд╡рд╛рдж....
рдУрд╣, рдореИрдВ test.js рджреЗрдЦрддрд╛ рд╣реВрдВред рддреЛ рдХреНрдпрд╛ рдЖрдк рдХрд╣ рд░рд╣реЗ рд╣реИрдВ рдХрд┐ рд╣рдореЗрдВ readFileSYnc рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП рдФрд░ рдЯреЗрдореНрдкрд▓реЗрдЯ рдХрд╛ рд╕рдВрдХрд▓рди рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП, рдмрдирд╛рдо рдкреНрд░рд╕реНрддреБрдд рдХрд░рдирд╛ рдЬрд┐рд╕рдореЗрдВ рдЖрдВрд╢рд┐рдХ рд╣реИрдВ?
рд╕рдВрдШрд░реНрд╖ рдЬрд╛рд░реА рд░рдЦрд╛ред рдХреНрдпрд╛ рдХреЛрдИ рд╕рд╛рдзрд╛рд░рдг рдЙрджрд╛рд╣рд░рдг рд╣реИ рдЬреЛ рдиреЛрдбрдЬ рдХреЗ рдЕрдВрддрд░реНрдЧрдд рдЪрд▓рддрд╛ рд╣реИ рдЬреЛ рдЯреЗрдореНрдкрд▓реЗрдЯреНрд╕ рдореЗрдВ рдЖрдВрд╢рд┐рдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реИ?
рдпрд╣рд╛рдВ рдХреБрдВрдЬреА рдпрд╣ рд╣реИ рдХрд┐ рдЖрдкрдХреЛ to_html()
рдкрд░ рдХреЙрд▓ рдХрд░рдиреЗ рд╕реЗ рдкрд╣рд▓реЗ рд╕рднреА рдЯреЗрдореНрдкрд▓реЗрдЯ рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЛ рдХрд╣реАрдВ рд╕реЗ рд▓реЛрдб рдХрд░рдирд╛ рд╣реЛрдЧрд╛ рдФрд░ рд╕рднреА рдЯреЗрдореНрдкрд▓реЗрдЯ рдХреА рд╕рд╛рдордЧреНрд░реА рдореЗрдВ рдкрд╛рд╕ рдХрд░рдирд╛ рд╣реЛрдЧрд╛:
var view = {
partial: {
foo: 1
},
name: "Jan"
};
var template = "Hi {{name}}. you have {{>partial}} foos.";
var partial_html = "{{foo}}";
Mustache.to_html(view, template, {
partial: partial_html
});
/рдХреЛрдИ рдмрд╛рдд рдирд╣реАрдВред
рд╕рдорд╕реНрдпрд╛ рдереА, рдореЗрд░реЗ рдЯреЗрдореНрдкрд▓реЗрдЯ рдореЗрдВ рдПрдХ рдерд╛
, рдЬреЛ рд╕рдВрдХрд▓рдХ рдХреЛ рдЙрдбрд╝рд╛ рд░рд╣рд╛ рдерд╛ .... рдпрд╣ рд╕реНрдкрд╖реНрдЯ рд░реВрдк рд╕реЗ 'рдЙрджреНрдзрд░рдг' рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП: рдЖрдВрд╢рд┐рдХ рд░реВрдк рд╕реЗ...рдпрд╣рд╛рдВ рдХреБрдВрдЬреА рдпрд╣ рд╣реИ рдХрд┐ рдЖрдкрдХреЛ to_html() рдХреЛ рдХреЙрд▓ рдХрд░рдиреЗ рд╕реЗ рдкрд╣рд▓реЗ рд╕рднреА рдЯреЗрдореНрдкрд▓реЗрдЯ рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЛ рдХрд╣реАрдВ рд╕реЗ рд▓реЛрдб рдХрд░рдирд╛ рд╣реЛрдЧрд╛ рдФрд░ рд╕рднреА рдЯреЗрдореНрдкрд▓реЗрдЯ рдХреА рд╕рд╛рдордЧреНрд░реА рдореЗрдВ рдкрд╛рд╕ рдХрд░рдирд╛ рд╣реЛрдЧрд╛:
рд╡рд░ рджреГрд╢реНрдп = {
рдЖрдВрд╢рд┐рдХ: {
рдлреВ: 1
},
рдирд╛рдо: "рдЬрди"
};
var template = "рдирдорд╕реНрддреЗ {{name}}ред рдЖрдкрдХреЗ рдкрд╛рд╕ {{>partial}} foos рд╣реИрдВред";
рд╡рд░ рдЖрдВрд╢рд┐рдХ_рдПрдЪрдЯреАрдПрдордПрд▓ = "{{foo}}";
рдореВрдВрдЫреЗрдВ.to_html(рджреЗрдЦреЗрдВ, рдЯреЗрдореНрдкрд▓реЗрдЯ, {
рдЖрдВрд╢рд┐рдХ: рдЖрдВрд╢рд┐рдХ_рдПрдЪрдЯреАрдПрдордПрд▓
});
... рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЖрдкрдХреЛ рдЗрд╕реЗ рджрд╕реНрддрд╛рд╡реЗрдЬрд╝реАрдХрд░рдг рдореЗрдВ рдЬреЛрдбрд╝рдирд╛ рдЪрд╛рд╣рд┐рдП - рдореИрдВрдиреЗ рдЕрдкрдирд╛ рд╕рд┐рд░ рдЦреБрдЬрд▓рд╛рдиреЗ рдореЗрдВ рдПрдХ рдШрдВрдЯреЗ рд╕реЗ рдЕрдзрд┐рдХ рдХрд╛ рд╕рдордп рдмрд┐рддрд╛рдпрд╛ рдХрд┐ рдЖрдВрд╢рд┐рдХ рд░реВрдк рд╕реЗ рдХрд╛рдо рдХреНрдпреЛрдВ рдирд╣реАрдВ рдХрд┐рдпрд╛ - рдореБрдЭреЗ рд╕рд░рд▓ рдФрд░ рд╕реНрдкрд╖реНрдЯ рджрд╕реНрддрд╛рд╡реЗрдЬрд╝реАрдХрд░рдг рдкрд╕рдВрдж рд╣реИ, рд▓реЗрдХрд┐рди рдХрд┐рд╕реА рдХреЛ рднреА рдЖрд╡рд╢реНрдпрдХ рдЬрд╛рдирдХрд╛рд░реА рдХреЛ рдЫреЛрдбрд╝рдиреЗ рдХреА рдХреАрдордд рдкрд░ рдирд╣реАрдВ рдмреБрдирд┐рдпрд╛рджреА рдХрд╛рд░реНрдпрдХреНрд╖рдорддрд╛ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХреИрд╕реЗ рдХрд░реЗрдВ
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
рдпрд╣рд╛рдВ рдХреБрдВрдЬреА рдпрд╣ рд╣реИ рдХрд┐ рдЖрдкрдХреЛ to_html() рдХреЛ рдХреЙрд▓ рдХрд░рдиреЗ рд╕реЗ рдкрд╣рд▓реЗ рд╕рднреА рдЯреЗрдореНрдкрд▓реЗрдЯ рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЛ рдХрд╣реАрдВ рд╕реЗ рд▓реЛрдб рдХрд░рдирд╛ рд╣реЛрдЧрд╛ рдФрд░ рд╕рднреА рдЯреЗрдореНрдкрд▓реЗрдЯ рдХреА рд╕рд╛рдордЧреНрд░реА рдореЗрдВ рдкрд╛рд╕ рдХрд░рдирд╛ рд╣реЛрдЧрд╛:
рд╡рд░ рджреГрд╢реНрдп = {
рдЖрдВрд╢рд┐рдХ: {
рдлреВ: 1
},
рдирд╛рдо: "рдЬрди"
};
var template = "рдирдорд╕реНрддреЗ {{name}}ред рдЖрдкрдХреЗ рдкрд╛рд╕ {{>partial}} foos рд╣реИрдВред";
рд╡рд░ рдЖрдВрд╢рд┐рдХ_рдПрдЪрдЯреАрдПрдордПрд▓ = "{{foo}}";
рдореВрдВрдЫреЗрдВ.to_html(рджреЗрдЦреЗрдВ, рдЯреЗрдореНрдкрд▓реЗрдЯ, {
рдЖрдВрд╢рд┐рдХ: рдЖрдВрд╢рд┐рдХ_рдПрдЪрдЯреАрдПрдордПрд▓
});
... рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЖрдкрдХреЛ рдЗрд╕реЗ рджрд╕реНрддрд╛рд╡реЗрдЬрд╝реАрдХрд░рдг рдореЗрдВ рдЬреЛрдбрд╝рдирд╛ рдЪрд╛рд╣рд┐рдП - рдореИрдВрдиреЗ рдЕрдкрдирд╛ рд╕рд┐рд░ рдЦреБрдЬрд▓рд╛рдиреЗ рдореЗрдВ рдПрдХ рдШрдВрдЯреЗ рд╕реЗ рдЕрдзрд┐рдХ рдХрд╛ рд╕рдордп рдмрд┐рддрд╛рдпрд╛ рдХрд┐ рдЖрдВрд╢рд┐рдХ рд░реВрдк рд╕реЗ рдХрд╛рдо рдХреНрдпреЛрдВ рдирд╣реАрдВ рдХрд┐рдпрд╛ - рдореБрдЭреЗ рд╕рд░рд▓ рдФрд░ рд╕реНрдкрд╖реНрдЯ рджрд╕реНрддрд╛рд╡реЗрдЬрд╝реАрдХрд░рдг рдкрд╕рдВрдж рд╣реИ, рд▓реЗрдХрд┐рди рдХрд┐рд╕реА рдХреЛ рднреА рдЖрд╡рд╢реНрдпрдХ рдЬрд╛рдирдХрд╛рд░реА рдХреЛ рдЫреЛрдбрд╝рдиреЗ рдХреА рдХреАрдордд рдкрд░ рдирд╣реАрдВ рдмреБрдирд┐рдпрд╛рджреА рдХрд╛рд░реНрдпрдХреНрд╖рдорддрд╛ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХреИрд╕реЗ рдХрд░реЗрдВ