Handlebars.js: рддрд╛рд▓рд┐рдХрд╛ рдмрдирд╛рддреЗ рд╕рдордп рдЧрддрд┐рд╢реАрд▓ рдЯреАрдбреА рдЪреМрдбрд╝рд╛рдИ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 23 рдЕрдкреНрд░реИрд▓ 2018  ┬╖  7рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: handlebars-lang/handlebars.js

рдореИрдВ рдПрдХ рдЯреЗрдмрд▓ рдмрдирд╛ рд░рд╣рд╛ рд╣реВрдВ рдЬрд┐рд╕рдореЗрдВ рдЯреАрдбреА рдХреА рдЧрддрд┐рд╢реАрд▓ рд╕рдВрдЦреНрдпрд╛ рд╡рд╛рд▓реА рджреЛ рдкрдВрдХреНрддрд┐рдпрд╛рдВ рд╢рд╛рдорд┐рд▓ рд╣реИрдВред
рдорд╣рддреНрд╡рдкреВрд░реНрдг рд╣рд┐рд╕реНрд╕рд╛ рдкреНрд░рддреНрдпреЗрдХ рдЯреАрдбреА рдХреЗ рд▓рд┐рдП рдЪреМрдбрд╝рд╛рдИ рдирд┐рд░реНрдзрд╛рд░рд┐рдд рдХрд░рдирд╛ рд╣реИ рдФрд░ рдЪреМрдбрд╝рд╛рдИ рдХреА рдЧрдгрдирд╛ рдХреА рдЧрдИ рд╣реИ рдФрд░ рджреЗрдЦрдиреЗ рдХреЗ рд▓рд┐рдП рдкрд╛рд░рд┐рдд рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИред
tdWidth: 100/numberOfChars => рдЬреЛ рдЪреМрдбрд╝рд╛рдИ рдХреЗ рд▓рд┐рдП рдкреНрд░рддрд┐рд╢рдд рджреЗрддрд╛ рд╣реИ
рдореИрдВ рдирд┐рдореНрдирд▓рд┐рдЦрд┐рдд рдХреЛрдб рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рд▓реЗрдХрд┐рди рдпрд╣ рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИ:

<table>
<tbody>
<tr>
{{#each array}}
<td style='width: {{tdWidth}}%;'>{{this}}</td>
{{/each}}
</tr>
</tbody>
</table>

рдХрд┐рд╕реА рднреА рдорджрдж рдХреА рд╕рд░рд╛рд╣рдирд╛ рдХреАред

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

рдЖрдк рдЕрдкрдиреЗ "рдкреНрд░рддреНрдпреЗрдХ" рдХрдерди рдореЗрдВ "рд╕реБрдзрд╛рд░" рдХрд░ рд░рд╣реЗ рд╣реИрдВ, рд▓реЗрдХрд┐рди рдЙрд╕ рдСрдмреНрдЬреЗрдХреНрдЯ рдореЗрдВ "tdWidth" рдСрдмреНрдЬреЗрдХреНрдЯ рдирд╣реАрдВ рд╣реИред

рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЖрдкрдХреЛ рдЗрд╕реЗ рдмрджрд▓рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛ рд╕рдХрддреА рд╣реИ:
{{tdWidth}}

рдЗрд╕рдХреЗ рд▓рд┐рдпреЗ:
{{../tdWidth}}

рд╕рдВрджрд░реНрдн: http://handlebarsjs.com/ ("рд╣реИрдВрдбрд▓рдмрд╛рд░ рдкрде" рдХреЗ рдЕрдВрддрд░реНрдЧрдд)

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

@nknapp рдХреГрдкрдпрд╛ рдорджрдж рдХрд░реЗрдВ!

рдЖрдкрдХреЛ рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдХреНрдпрд╛ рд╕рдорд╕реНрдпрд╛ рд╣реЛ рд░рд╣реА рд╣реИ?

рд╕рдорд╕реНрдпрд╛ рдХреЛ рд╣рд▓ рдХрд░рдиреЗ рдореЗрдВ рд╕рд╣рд╛рдпрддрд╛ рдХреЗ рд▓рд┐рдП рдЕрдзрд┐рдХ рдХреЛрдб рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрдЧреАред

@magikstm рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ tdWidth рд╕рд░реНрд╡рд░ рд╕реЗ рдЖрддрд╛ рд╣реИ рд▓реЗрдХрд┐рди рдЗрд╕реЗ рдХреНрд▓рд╛рдЗрдВрдЯ рдореЗрдВ рдкреНрд░рд╕реНрддреБрдд рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЬрд╛ рд░рд╣рд╛ рд╣реИред рдЬрдм рдореИрдВ рдХреНрд▓рд╛рдЗрдВрдЯ рдкрд░ рд╕реНрд░реЛрдд рдХреА рдЬрд╛рдВрдЪ рдХрд░рддрд╛ рд╣реВрдВ, рддреЛ рдпрд╣ рджрд┐рдЦрд╛рддрд╛ рд╣реИ:

рд╕реА
рд▓реЗрдХрд┐рди рдЬрдм рдореИрдВ рдПрдХ рдЕрд╡рдзрд┐ рдпрд╛ div рдХреЗ рдЕрдВрджрд░ tdWidth рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░рддрд╛ рд╣реВрдВ, рддреЛ рдпрд╣ рджрд┐рдЦрд╛рддрд╛ рд╣реИ: 9.99 рдЬрд┐рд╕рдХрд╛ рдЕрд░реНрде рд╣реИ рдХрд┐ рд╕рд░реНрд╡рд░ рд╕реЗ рдбреЗрдЯрд╛ рдЖ рд░рд╣рд╛ рд╣реИред рдЬрдм рдореИрдВ рдЗрд╕реЗ рдХрд┐рд╕реА рддрддреНрд╡ рдХреЗ рд╕реНрдЯрд╛рдЗрд▓ рдЯреИрдЧ рдХреЗ рдЕрдВрджрд░ рд░рдЦрддрд╛ рд╣реВрдВ рддреЛ рдпрд╣ рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИред

@amirzandi рдХреНрдпрд╛ рдЖрдк рдХреГрдкрдпрд╛ рдЕрдкрдирд╛ рдЕрдзрд┐рдХ рдХреЛрдб рд╕рд╛рдЭрд╛ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ?

рд╡рд┐рд╢реЗрд╖ рд░реВрдк рд╕реЗ рд╡рд╣ рд╣рд┐рд╕реНрд╕рд╛ рдЬреЛ "tdWidth" рдорд╛рди рдмрдирд╛рддрд╛ рд╣реИ рдФрд░ рд╕рд╛рде рд╣реА рдЖрдк рдЗрд╕реЗ рдЕрдкрдиреЗ рдкреГрд╖реНрда рдХреЗ рдЙрд╕ рд╣рд┐рд╕реНрд╕реЗ рд╕реЗ рдХреИрд╕реЗ рд▓рд┐рдВрдХ рдХрд░рддреЗ рд╣реИрдВред

@magikstm
рдпрд╣ рд╕рд░реНрд╡рд░ рд╕рд╛рдЗрдб рд╣реИ:
res.render('./game/phrase_box', {
рд▓реЗрдЖрдЙрдЯ: рдЭреВрдард╛,
рдЧрд▓рдд: рдкрд░рд┐рдгрд╛рдоред рдЧрд▓рдд,
рд╕реБрдзрд╛рд░: рдкрд░рд┐рдгрд╛рдоред рд╕реБрдзрд╛рд░,
numberOfChars: result.numberOfChars,
tdWidth: 100 / numberOfChars
});

рдпрд╣ рдЧреНрд░рд╛рд╣рдХ рдкрдХреНрд╖ рд╣реИ:
{{#рдЕрдЧрд░ рдЧрд▓рдд рд╣реИ}}
{{#рдЕрдЧрд░ рд╕рд╣реА рдХрд░рддрд╛ рд╣реИ}}


            <tr>
                {{#each corrects}}
                    <td style="width:{{tdWidth}}%">{{this}}</td>
                {{/each}}
            </tr>
        </tbody>
    </table>
{{/if}}

{{рдЕрдиреНрдпрдерд╛}}

{{/рдЕрдЧрд░}}

рдЖрдк рдЕрдкрдиреЗ "рдкреНрд░рддреНрдпреЗрдХ" рдХрдерди рдореЗрдВ "рд╕реБрдзрд╛рд░" рдХрд░ рд░рд╣реЗ рд╣реИрдВ, рд▓реЗрдХрд┐рди рдЙрд╕ рдСрдмреНрдЬреЗрдХреНрдЯ рдореЗрдВ "tdWidth" рдСрдмреНрдЬреЗрдХреНрдЯ рдирд╣реАрдВ рд╣реИред

рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЖрдкрдХреЛ рдЗрд╕реЗ рдмрджрд▓рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛ рд╕рдХрддреА рд╣реИ:
{{tdWidth}}

рдЗрд╕рдХреЗ рд▓рд┐рдпреЗ:
{{../tdWidth}}

рд╕рдВрджрд░реНрдн: http://handlebarsjs.com/ ("рд╣реИрдВрдбрд▓рдмрд╛рд░ рдкрде" рдХреЗ рдЕрдВрддрд░реНрдЧрдд)

@magikstm рдУрд╣реНрд╣реНрд╣реНрд╣ рдЖрдкрдиреЗ рдореЗрд░рд╛ рджрд┐рди рдмрдЪрд╛ рд▓рд┐рдпрд╛... рдмрд╣реБрдд-рдмрд╣реБрдд рдзрдиреНрдпрд╡рд╛рдж... рдмрд╣реБрдд-рдмрд╣реБрдд рдзрдиреНрдпрд╡рд╛рджред

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

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

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

rizen picture rizen  ┬╖  6рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

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

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

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