\u0427\u0442\u043e\u0431\u044b \u0431\u044b\u0441\u0442\u0440\u043e \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 JavaScript \u0438\u0437 \u0440\u0430\u0437\u0440\u044f\u0434\u0430 MV*, \u0432\u0430\u0436\u043d\u043e \u0443\u043c\u0435\u0442\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043a\u0430\u043a \u0440\u044f\u0434 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 MV*-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2014 \u044d\u0442\u043e \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f, \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u0448\u0430\u0431\u043b\u043e\u043d\u044b\/\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0434\u0430\u043d\u043d\u044b\u0445. \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u044f \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0441\u044c \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u044d\u0442\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u043e\u0434 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0432 \u0434\u0432\u0443\u0445 \u0438\u043b\u0438 \u0442\u0440\u0435\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c, \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043a\u0430\u043a\u0438\u0445 \u0438\u043c\u0435\u043d\u043d\u043e \u0437\u0430\u0434\u0430\u0447 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e, \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0432\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u0435 \u0432\u043e \u0432\u0441\u0435\u0445 \u044d\u0442\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445 \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u0445\u043e\u0434\u0441\u0442\u0432, \u0447\u0435\u043c \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u0439. \u041e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0437\u0430\u0438\u043c\u0441\u0442\u0432\u0443\u044e\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u043e\u043f\u0440\u0430\u0432\u0434\u0430\u0432\u0448\u0438\u0435 \u0441\u0435\u0431\u044f \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445. <\/p>\n
\u042f \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e \u0432\u0438\u0434\u0435\u0442\u044c \u0432 \u043b\u044e\u0434\u044f\u0445 \u0441\u0445\u043e\u0434\u0441\u0442\u0432\u0430, \u0430 \u043d\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u2014 \u0418\u0441\u0430\u0431\u0435\u043b\u044c \u0410\u043b\u044c\u0435\u043d\u0434\u0435 <\/p><\/blockquote>\n
\u041d\u0435 \u0443\u0442\u0440\u0443\u0436\u0434\u0430\u0439\u0442\u0435 \u0441\u0435\u0431\u044f \u0440\u0430\u0437\u0431\u043e\u0440\u043e\u043c \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u043a\u043e\u0434\u0430. \u041f\u043e\u043a\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u043e\u0446\u0435\u043d\u0438\u0442\u044c, \u0432 \u0447\u0435\u043c \u0441\u0445\u043e\u0436\u0438 \u044d\u0442\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438, \u0438 \u043a\u0430\u043a\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043e\u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0440\u0435\u0448\u0430\u0442\u044c \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435.<\/p>\n
\u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f<\/b><\/p>\n
\u041a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c, \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0432\u0430\u0448\u0438 URL \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u043d\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u0434\u0435\u043b\u043e \u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0434\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430 \u00ab\u043c\u0430\u0448\u0438\u043d\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439\u00bb \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u043c\u0438 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f.
\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043a\u043e\u0433\u0434\u0430-\u043d\u0438\u0431\u0443\u0434\u044c \u0434\u043e\u0432\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0442\u043e\u0440 \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c MVC-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 Rails, CodeIgniter, CakePHP, ASP.NET MVC, Spring MVC, JSF, STRUTS, Grails \u0438 \u0442.\u0434., \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0447\u0438\u0442\u0430\u0442\u044c MV*-\u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0442\u043e\u0440\u044b JavaScript \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c\u0438 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u043c\u0438, \u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u043c\u0438 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0441 JavaScript \u0438 \u043f\u0440\u043e\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0449\u0438\u043c\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c\u0443 \u043a\u043e\u0434\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 PHP, Ruby, Java, C# \u0438 \u0442.\u0434. <\/p>\n
\u041c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441: \u0430 \u043a\u0430\u043a \u0432\u0441\u0435 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u0441\u0442\u0430\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445? \u041c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \u0432\u0441\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0430 \u0432 URL \u043f\u043e\u0441\u043b\u0435 \u0445\u044d\u0448\u0442\u0435\u0433\u0430. \u041f\u0440\u0430\u0432\u0434\u0430, \u0435\u0441\u043b\u0438 \u0432 HTML \u0441\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0443\u0448-\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 (\u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 \u043a\u043e\u0434\u0430), \u0442\u043e URL \u0431\u0435\u0437 \u0445\u044d\u0448\u0435\u0439, \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0435 \u0441 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430\u043c\u0438, \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0438 \u0442\u0430\u043a\u0436\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043a\u043e\u0434 JavaScript.
\u041f\u0443\u0448-\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u041d\u0415 \u041f\u041e\u0414\u0414\u0415\u0420\u0416\u0418\u0412\u0410\u0415\u0422\u0421\u042f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0442\u0430\u043a \u043a\u0430\u043a, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e URL, \u0437\u0430\u043f\u0440\u043e\u0448\u0435\u043d\u043d\u044b\u0439 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u043a\u043b\u0430\u0434\u043a\u0443 \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0441\u043b\u0430\u043d\u043d\u044b\u0439 \u0432 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0438, \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0435 \u0440\u043e\u0431\u043e\u0442\u044b \u043d\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u0440\u0438\u0441\u043f\u043e\u0441\u043e\u0431\u043b\u0435\u043d\u044b \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 JavaScript. \u0422\u043e \u0435\u0441\u0442\u044c, \u0440\u043e\u0431\u043e\u0442 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u0434 JavaScript, \u043f\u043e\u044d\u0442\u043e\u043c\u0443, \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438\u0441\u0442\u0438\u043d\u043d\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0420\u0435\u0448\u0435\u043d\u0438\u0435, \u043e\u0431\u044b\u0447\u043d\u043e \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u043c\u043e\u0435 \u0432 \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u2013 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 PhantomJS \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u0439 \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 JavaScript, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 JavaScript. \u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c, \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0442\u0440\u0443\u0434\u0438\u0442\u044c\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f URL \u0441 \u0445\u044d\u0448\u0442\u0435\u0433\u0430\u043c\u0438, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0432\u043e \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. <\/p>\n
\u0414\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0439, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u043a\u043e\u0434\u0443.<\/p>\n
\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 Backbone<\/i> <\/p>\n
\u0412\u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 Backbone.js<\/p>\n
var HomeView = Backbone.View.extend({ template: '<h1>Home<\/h1>', initialize: function () { this.render(); }, render: function () { this.$el.html(this.template); } }); var AboutView = Backbone.View.extend({ template: '<h1>About<\/h1>', initialize: function () { this.render(); }, render: function () { this.$el.html(this.template); } }); var AppRouter = Backbone.Router.extend({ routes: { '': 'homeRoute', 'home': 'homeRoute', 'about': 'aboutRoute', }, homeRoute: function () { var homeView = new HomeView(); $("#content").html(homeView.el); }, aboutRoute: function () { var aboutView = new AboutView(); $("#content").html(aboutView.el); } }); var appRouter = new AppRouter(); Backbone.history.start(); <\/code><\/pre>\n \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442 AppRouter. \u041c\u0430\u0440\u0448\u0440\u0443\u0442\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u0424\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u043c \u043c\u043e\u0434\u0435\u043b\u0438 DOM, \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u0435\u0433\u043e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e URL \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f. \u0424\u0443\u043d\u043a\u0446\u0438\u044f Backbone.history.start() \u043f\u0440\u0438\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 Backbone \u043d\u0430\u0447\u0430\u0442\u044c \u0441\u043b\u0443\u0448\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f URL.<\/p>\n
\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 AngularJS <\/i><\/p>\n
\u0412\u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 AngularJS.<\/p>\n
var routingExample = angular.module('FunnyAnt.Examples.Routing', []); routingExample.controller('HomeController', function ($scope) {}); routingExample.controller('AboutController', function ($scope) {}); routingExample.config(function ($routeProvider) { $routeProvider. when('\/home', { templateUrl: 'embedded.home.html', controller: 'HomeController' }). when('\/about', { templateUrl: 'embedded.about.html', controller: 'AboutController' }). otherwise({ redirectTo: '\/home' }); }); <\/code><\/pre>\n \u041f\u0440\u0438\u043c\u0435\u0440 \u0441 AngularJS \u043e\u0447\u0435\u043d\u044c \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 Backbone, \u0437\u0430 \u0442\u0435\u043c \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c, \u0447\u0442\u043e \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u044b templateUrl \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u0432 (\u0432 \u0442\u0430\u043a\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b \u043f\u043e\u0434\u043e\u0431\u043d\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u043c Backbone).
\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 Ember <\/p>\n
\u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 Ember.<\/p>\n
App.Router.map(function() { \/\/ \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u0448\u0430\u0431\u043b\u043e\u043d\u0443 this.route('home', { path: '\/' }); this.route('about'); }); <\/code><\/pre>\n \u041e\u043f\u044f\u0442\u044c \u0436\u0435, \u043f\u0440\u0438\u043c\u0435\u0440 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435, \u0437\u0430 \u0442\u0435\u043c \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c, \u0447\u0442\u043e \u0432 Ember.js \u043f\u0435\u0440\u0432\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u00ab\u0440\u0435\u0441\u0443\u0440\u0441\u043d\u043e\u0433\u043e\u00bb \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0442\u043e\u0440\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u043c\u044f routeName, \u0430 \u0432\u0442\u043e\u0440\u044b\u043c \u2014 URL. \u041d\u0430 \u043f\u0435\u0440\u0432\u044b\u0445 \u043f\u043e\u0440\u0430\u0445 \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u0435\u043d\u044f \u0437\u0430\u043f\u0443\u0442\u0430\u043b, \u043f\u043e\u043a\u0430 \u043a\u0442\u043e-\u0442\u043e \u043d\u0435 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u0430\u043b, \u0447\u0442\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043f\u0443\u0442\u0438 \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u0435\u043d \u0438 \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u043c\u043e\u0436\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044e, \u043a\u0430\u043a \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 about \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0443\u0436\u043d\u044b \u0448\u0430\u0431\u043b\u043e\u043d\u044b, \u043d\u043e \u044f \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u044e\u0441\u044c \u043d\u0430 \u043d\u0438\u0445 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0430\u0442\u044c\u0438. \u041f\u043e\u043a\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u043f\u043e\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 {{outlet}}. \u0421\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0442\u043e\u0440 Ember \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432, \u043d\u043e \u0437\u0434\u0435\u0441\u044c \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u044b\u0442\u0430\u044e\u0441\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u043d \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0441\u0445\u043e\u0436 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438. <\/p>\n
\u041f\u0440\u043e\u0441\u0442\u043e \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f<\/b><\/p>\n
\u0412 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438, \u043d\u043e \u0432 Knockout.js \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0430\u043a\u0446\u0435\u043d\u0442 \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043b\u0443\u0447\u0448\u0435\u0435 \u0432 \u0441\u0432\u043e\u0435\u043c \u0440\u043e\u0434\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0449\u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a JavaScript, \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u2014 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f. \u041d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u0440\u043e\u0434\u0430 \u2014 SummyJS \u0438 HistoryJS. SummyJS \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u043c\u0438 API History \u0434\u043b\u044f HTML5, \u0430 \u0442\u0430\u043a\u0436\u0435 URL-\u0445\u044d\u0448\u0438 \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 (IE 8 \u0438 \u043d\u0438\u0436\u0435). \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 HistoryJS \u043c\u0435\u043d\u044c\u0448\u0435, \u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e API History \u0434\u043b\u044f HTML5. <\/p>\n
\u041f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445<\/b><\/p>\n
\u041f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u043d\u043e\u0441\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0438\u043b\u0438 \u0438\/\u0438\u043b\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u044c \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439, \u0432\u043d\u0435\u0441\u0435\u043d\u043d\u044b\u0445 \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u043f\u0440\u0438\u0447\u0435\u043c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430. \u041e\u0434\u043d\u043e\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0431\u044b\u0447\u043d\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0432\u043d\u043e\u0441\u0438\u043c\u044b\u0435 \u0432 \u043c\u043e\u0434\u0435\u043b\u044c, \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435. \u041f\u0440\u0438 \u0434\u0432\u0443\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0439 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e \u043e\u0442\u0440\u0430\u0436\u0430\u0442\u044c \u0432 \u043c\u043e\u0434\u0435\u043b\u0438 \u0432\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0432\u043d\u043e\u0441\u0438\u043c\u044b\u0435 \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435. \u041f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437\u0431\u0430\u0432\u0438\u0442 \u0432\u0430\u0441 \u043e\u0442 \u043c\u0430\u0441\u0441\u044b \u0441\u0442\u0435\u0440\u0435\u043e\u0442\u0438\u043f\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u044b\u0447\u043d\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0440\u0435\u0448\u0435\u043d\u0438\u0438 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e. <\/p>\n
\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 AngularJS <\/i><\/p>\n
\u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u0432\u0443\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0439 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 AngularJS. \u041f\u0440\u0438 \u043d\u0430\u0431\u043e\u0440\u0435 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f. <\/p>\n
<h1>Simple Data Binding with AngularJS<\/h1> <br \/> <div ng-app> Name: <input type="text" ng-model="name" \/> <br \/><br \/> Welcome to AngularJS {{name}} <\/div> <\/code><\/pre>\n \u041f\u0440\u0438\u043c\u0435\u0440 \u0441 KnockoutJS <\/i><\/p>\n
\u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a KnockoutJS \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043d\u0430\u0438\u043b\u0443\u0447\u0448\u0435\u0433\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438, \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u0441 DurandalJS \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u0438\u0441\u043f\u043b\u0435\u0435\u043c \u0438 History.js \u0438\u043b\u0438 Sammy.js \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438. \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 KnockoutJS.<\/p>\n
\/\/ \u0417\u0434\u0435\u0441\u044c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043c\u043e\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u0430\u043d\u043d\u044b\u0445 var ViewModel = function(name) { this.name = ko.observable(name); }; ko.applyBindings(new ViewModel("")); \/\/ \u0422\u0430\u043a \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430 Knockout <\/code><\/pre>\n \u041f\u0440\u0438\u043c\u0435\u0440 \u0441 Backbone<\/i> <\/p>\n
\u0412 Backbone \u043d\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u043e\u0434\u043d\u0430\u043a\u043e \u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e. \u041f\u043e \u043c\u043e\u0435\u043c\u0443 \u043e\u043f\u044b\u0442\u0443, \u043e\u0434\u043d\u043e\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0432\u043d\u043e\u0441\u0438\u043c\u044b\u0435 \u0432 \u043c\u043e\u0434\u0435\u043b\u044c, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439. \u0420\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u043b\u0443\u0447\u0430\u0438 \u043e\u0434\u043d\u043e\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0439 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0442 \u0432\u0438\u0434\u0430 \u043a \u043c\u043e\u0434\u0435\u043b\u0438 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u0440\u0435\u0436\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0436\u0438\u0432\u043e\u0439 \u043f\u0440\u0435\u0434\u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0442\u0435\u043a\u0441\u0442\u0430, \u0432\u0432\u043e\u0434\u0438\u043c\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0432 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440). \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u043e\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a \u043c\u043e\u0434\u0435\u043b\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u0430, \u043d\u043e \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u043f\u0440\u0438\u0447\u0438\u043d\u043e\u0439 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f, \u0432\u0432\u043e\u0434\u0438\u043c\u0430\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c, \u0430 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0443\u0441\u043f\u0435\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043f\u0440\u0435\u0436\u0434\u0435, \u0447\u0435\u043c \u044d\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0443\u0442 \u0432\u043d\u0435\u0441\u0435\u043d\u044b \u0432 \u043c\u043e\u0434\u0435\u043b\u044c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u0435\u0447\u044c \u043c\u043e\u0436\u0435\u0442 \u0438\u0434\u0442\u0438 \u043e \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0432\u0432\u043e\u0434\u0430 \u0438\u043b\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0441\u043f\u0438\u0441\u043a\u0430, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0442\u0430\u043a\u0436\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0444\u0438\u043b\u044c\u0442\u0440. \u041d\u0438\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u0434\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u043e\u0431\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438. <\/p>\n
var MessageView = Backbone.View.extend({ template: _.template($('#message-template').html()), events: { 'keyup #name': 'updateModel' }, updateModel: function(event) { this.model.set({name:$("#name").val()}); }, initialize: function() { this.listenTo(this.model, "change", this.render); this.render(); }, render: function() { this.$('#message').html(this.template(this.model.toJSON())); return this; } }); var person = new Backbone.Model({name:''}); messageView = new MessageView({el: $('#message-container') ,model: person}); <\/code><\/pre>\n \u0418\u0442\u0430\u043a, \u0432\u044b \u0441\u043b\u0443\u0448\u0430\u0435\u0442\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439, \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0432 \u043c\u043e\u0434\u0435\u043b\u0438, \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f render, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0434\u0435\u043b\u044c \u043e\u0431\u043d\u043e\u0432\u0438\u043b\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435. \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u0432\u044b \u0441\u043b\u0443\u0448\u0430\u0435\u0442\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u00abkeyup\u00bb \u043f\u0440\u0438 \u0432\u0432\u043e\u0434\u0435 \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0435 \u043c\u043e\u0434\u0435\u043b\u044c, \u043f\u043e\u043b\u0443\u0447\u0430\u044f \u0438\u0437 \u0432\u0432\u043e\u0434\u0438\u043c\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043d\u0443\u0436\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 jQuery \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044f \u0435\u0433\u043e \u0432 \u043c\u043e\u0434\u0435\u043b\u0438 \u2014 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0431\u043d\u043e\u0432\u0438\u043b\u043e \u043c\u043e\u0434\u0435\u043b\u044c. \u0414\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0434\u0430 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0430 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445. \u0422\u0430\u043a\u0436\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c \u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0438 \u043c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0445 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 Backbone.<\/p>\n
\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 Ember <\/i><\/p>\n
\u041f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 Ember \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n
App = Ember.Application.create({}); <\/code><\/pre>\n \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a Ember \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0434\u043b\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0435 \u043d\u0430\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u044b handlebar, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u00ab\u043f\u043e\u043c\u043e\u0449\u043d\u0438\u043a\u0438 \u0432\u0432\u043e\u0434\u0430\u00bb, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0443 \u0442\u0435\u0445 \u043f\u043e\u043b\u0435\u0439 \u0432\u0432\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0444\u043e\u0440\u043c. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0444\u0438\u0433\u0443\u0440\u043d\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438 {{ \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442 \u0443\u0433\u043b\u043e\u0432\u044b\u0435 < \u043f\u0440\u0438 \u0432\u0432\u043e\u0434\u0435, \u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u201cname\u201d \u043a\u0430\u0432\u044b\u0447\u0435\u043a \u043d\u0435 \u0438\u043c\u0435\u0435\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u043c\u043e\u0449\u043d\u0438\u043a \u0437\u043d\u0430\u0435\u0442, \u0447\u0442\u043e \u0435\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u0442\u044c. \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a Ember, \u043f\u043e\u0434\u043e\u0431\u043d\u043e AngularJS, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0434\u0432\u0443\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u0443\u044e \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0443 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u0434\u0430. <\/p>\n
\u0428\u0430\u0431\u043b\u043e\u043d\u044b\/\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/b><\/p>\n
\u0428\u0430\u0431\u043b\u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0446\u0435\u043b\u043e\u0439 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043d\u043e \u0447\u0430\u0449\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0431\u043e\u0439 \u0431\u043e\u043b\u0435\u0435 \u043c\u0435\u043b\u043a\u0438\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b, \u0433\u0434\u0435 \u043d\u0430 \u043c\u0435\u0441\u0442\u0435 \u0431\u0443\u0434\u0443\u0449\u0438\u0445 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0441\u044f \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f-\u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u0438 \u0441 \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u043e\u0439 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u043e\u0439. \u041e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u044f \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438 \u2014 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0444\u0438\u043b\u043e\u0441\u043e\u0444\u0438\u044f, \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u0445 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438, \u043b\u0438\u0431\u043e \u043e\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u0442\u0430\u043c \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435. \u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u043c\u043e\u0436\u043d\u043e \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u0434 JavaScript. \u0428\u0430\u0431\u043b\u043e\u043d\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u0430\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043c\u043e\u0434\u0435\u043b\u0438 DOM \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c DOM \u0434\u043b\u044f \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u043b\u0435\u0442\u0443, \u043b\u0438\u0431\u043e \u0434\u043b\u044f \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0430\u0446\u0438\u0438 HTML: \u0441\u0442\u0440\u043e\u043a\u0438 HTML \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u0437\u0430\u043c\u0435\u043d\u044b \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. <\/p>\n
\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432<\/b><\/p>\n
\u0421\u0440\u0435\u0434\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0449\u0438\u0445 \u043f\u0440\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438, \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043d\u0430\u0437\u0432\u0430\u0442\u044c Handlebar.js \u2014 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0443\u044e \u0438\u0437 \u043d\u0438\u0445. Handlebar.js \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441 Backbone.js \u0438 \u0432\u0445\u043e\u0434\u0438\u0442 \u0432 \u0441\u043e\u0441\u0442\u0430\u0432 Ember.js (\u0441 Ember.js \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432, \u043d\u043e \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0430\u0434\u0430\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0438 \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u0442\u0430\u043a \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f). \u0415\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a-\u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f Mustache.js. UnderscoreJS \u2014 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0430\u044f \u0441 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c Backbone.js \u0438 \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0430\u044f, \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043c\u0430\u0441\u0441\u0443 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430 \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0412\u043e\u0441\u0445\u043e\u0434\u044f\u0449\u0435\u0439 \u0437\u0432\u0435\u0437\u0434\u043e\u0439 \u0432 \u044d\u0442\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 Dust.js, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0431\u044b\u043b\u0430 \u0432\u0437\u044f\u0442\u0430 \u043d\u0430 \u0432\u043e\u043e\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0435\u0439 LinkedIn \u0434\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Handlebar.js \u0438 Mustache.js \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0434\u043d\u0438\u0445 \u043b\u0438\u0448\u044c jQuery \u0438 AJAX (\u0431\u0435\u0437 \u0432\u0441\u044f\u043a\u043e\u0433\u043e JavaScript MVC), \u043a\u043e\u0433\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442, \u0447\u0442\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u0435\u043c\u0443 \u043d\u0443\u0436\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435. \u0412 \u0441\u043e\u0441\u0442\u0430\u0432\u0435 jQuery \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0430\u0441\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432, \u043d\u043e \u043d\u0430 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u043d\u0430 \u0443\u0436\u0435 \u043f\u0440\u0438\u0437\u043d\u0430\u043d\u0430 \u043d\u0435\u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439, \u0438 \u044f \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0435\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f. <\/p>\n
\u0418\u0441\u0442\u043e\u043a\u0438 Underscore<\/b><\/p>\n
\u0412\u0441\u0435 \u043d\u0430\u0447\u0430\u043b\u043e\u0441\u044c \u0441 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0414\u0436\u0435\u0440\u0435\u043c\u0438 \u0410\u0448\u043a\u0435\u043d\u0430\u0441, \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u044c BackboneJS, \u0438\u0437\u0432\u043b\u0435\u043a UnderscoreJS \u0438\u0437 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 Backbone, \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0443\u0434\u043e\u0431\u043d\u044b\u0435 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0432 \u043e\u0442\u0440\u044b\u0432\u0435 \u043e\u0442 BackboneJS.<\/p>\n
\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432.<\/p>\n
\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 AngularJS <\/i><\/p>\n
\u0412\u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0432 AngularJS.<\/p>\n
var templatesExample = angular.module('FunnyAnt.Examples.Templates', []); templatesExample.controller('HomeController', function ($scope) { $scope.greeting = "Welcome to the application."; }); templatesExample.controller('AboutController', function ($scope) { $scope.content = "As a software developer, I've always loved to build things..."; }); templatesExample.config(function ($routeProvider) { $routeProvider. when('\/home', { templateUrl: 'embedded.home.html', controller: 'HomeController' }). when('\/about', { templateUrl: 'embedded.about.html', controller: 'AboutController' }). otherwise({ redirectTo: '\/home' }); }); <\/code><\/pre>\n \u0412\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0432\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438, \u043a\u0430\u043a \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u043d\u043d\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0435\u0439. \u0417\u0434\u0435\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0449\u0438\u0435 \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u043c\u043e\u0433\u0443\u0442 \u0432\u0430\u043c \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0428\u0430\u0431\u043b\u043e\u043d\u044b \u043c\u043e\u0433\u0443\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u0432 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432\u044b\u0435 \u0442\u0435\u0433\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e HTML-\u0444\u0430\u0439\u043b\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e, \u0438 \u0441 \u043d\u0438\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 jsfiddle.net, \u043e\u0434\u043d\u0430\u043a\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u043c\u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f Angular.js. \u0412 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f $routeProvider \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 templateUrl.
\u0421\u0442\u043e\u0438\u0442 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0432 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 (\u0433\u0434\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438\u043c\u0435\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435) \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0446\u0435\u043f\u043b\u0435\u043d\u0438\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 AngularJS \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0438\u0445 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0435\u0439 \u0432 Angular $templateCache \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438, \u043f\u0440\u0438\u0447\u0435\u043c \u0437\u0430\u0434\u0430\u0447\u0430 \u0441\u0431\u043e\u0440\u043a\u0438 \u0444\u043e\u0440\u043c\u0443\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a. <\/p>\n
\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 Ember<\/i> <\/p>\n
\u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0432 Ember.<\/p>\n
App = Ember.Application.create({}); App.Router.map(function() { \/\/ \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u0448\u0430\u0431\u043b\u043e\u043d\u0443 this.resource('home', { path: '\/' }); this.resource('about', {path: '\/about'}); }); App.HomeRoute = Ember.Route.extend({ model:function(){ return{ greeting: 'Welcome to the application.' } } }); App.AboutRoute = Ember.Route.extend({ model: function(){ return{ pagecontent: 'As a software developer, I have always loved to build things...' }; } }); <\/code><\/pre>\n \u041c\u0430\u0440\u0448\u0440\u0443\u0442 Ember \u2014 \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442, \u0441\u043e\u043e\u0431\u0449\u0430\u044e\u0449\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d\u0443, \u043a\u0430\u043a\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u2013 \u0438\u043c\u0435\u043d\u043d\u043e \u043c\u043e\u0434\u0435\u043b\u044c, \u0430 \u043d\u0435 URL. \u0415\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u043c \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u0430 (URL), \u0447\u044c\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u2014 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u044c. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e, \u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0435\u0449\u0435 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u043e \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440.
\u0412 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445 Ember \u0438 AngularJS \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u043c\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443: \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0438 \u043c\u043e\u0434\u0435\u043b\u044c DOM \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u041e\u0434\u043d\u0430\u043a\u043e \u0432 \u043e\u0431\u043e\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0440\u0435\u0448\u0430\u044e\u0442\u0441\u044f \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0438 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u043d\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443, \u043e\u0447\u0435\u043d\u044c \u0441\u0445\u043e\u0436\u0438. \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u0433\u043b\u0443\u0431\u0438\u0432\u0448\u0438\u0441\u044c \u0432 \u0434\u0435\u0442\u0430\u043b\u0438, \u043e\u0442\u043c\u0435\u0442\u0438\u043c, \u0447\u0442\u043e \u043e\u0431\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 handlebar-\u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432\u044b\u0435 \u0442\u0435\u0433\u0438 \u0438\u043b\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432. <\/p>\n
\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 Backbone<\/i><\/p>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u043c\u0438 \u0432 Backbone.<\/p>\n
var HomeView = Backbone.View.extend({ template: _.template($("#home-template").html()), initialize: function () { this.render(); }, render: function () { this.$el.html(this.template({greeting:"Welcome to Backbone!"})); } }); var AboutView = Backbone.View.extend({ template: _.template($("#about-template").html()), initialize: function () { this.render(); }, render: function () { this.$el.html(this.template({content:"As a software developer, I've always loved to build things..."})); } }); var AppRouter = Backbone.Router.extend({ routes: { '': 'homeRoute', 'home': 'homeRoute', 'about': 'aboutRoute', }, homeRoute: function () { var homeView = new HomeView(); $("#content").html(homeView.el); }, aboutRoute: function () { var aboutView = new AboutView(); $("#content").html(aboutView.el); } }); var appRouter = new AppRouter(); Backbone.history.start(); <\/code><\/pre>\n \u042d\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0435\u0439. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 HTML \u043d\u0435 \u043a\u043e\u0434\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0436\u0435\u0441\u0442\u043a\u043e \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e template \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f; \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u043e\u0439 \u0432 \u0442\u0435\u0433 script \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c id (\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u044e\u0442 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432\u044b\u0435 \u0442\u0435\u0433\u0438, \u0442\u0438\u043f\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u043c \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b \u2014 \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, text\/template \u2014 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0430\u043c \u0448\u0430\u0431\u043b\u043e\u043d \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u0431\u0443\u0434\u0435\u0442). \u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0430 (HTML-\u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430) \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 jQuery, \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e id \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432\u043e\u0433\u043e \u0442\u0435\u0433\u0430, \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u0437 \u043d\u0435\u0433\u043e innerHTML \u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u044d\u0442\u043e\u0442 HTML \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 template \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f (\u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0442\u0440\u043e\u043a\u0430). <\/p>\n
\u041f\u0440\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 html, \u043b\u0435\u0433\u043a\u043e \u0441\u0435\u0431\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 Backbone \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u043e\u0432\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043d\u0430 \u043c\u0435\u0441\u0442\u043e \u0438\u043c\u0435\u044e\u0449\u0435\u0439\u0441\u044f; \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 template.
\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 Handlebars \u0432\u043c\u0435\u0441\u0442\u043e Underscore, \u043c\u044b \u043e\u0431\u043d\u043e\u0432\u0438\u043c \u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e template \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n
template: Handlebars.compile( $("#home-template").html() ), <\/code><\/pre>\n \u2026\u0430 \u0437\u0430\u0442\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u0438\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <\/p>\n
{{greeting}} <\/code><\/pre>\n \u0412\u043e\u0442 \u0438 \u0432\u0441\u0435, \u0447\u0442\u043e \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043e\u0434\u043d\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e.<\/p>\n
\u0412\u043e\u0442 \u043f\u043e\u043b\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 handlebar.js \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n
var HomeView = Backbone.View.extend({ template: Handlebars.compile( $("#home-template").html() ), initialize: function () { this.render(); }, render: function () { this.$el.html(this.template({greeting:"Welcome to Backbone!"})); } }); var AboutView = Backbone.View.extend({ template: Handlebars.compile( $("#about-template").html() ), initialize: function () { this.render(); }, render: function () { this.$el.html(this.template({content:"As a software developer, I've always loved to build things..."})); } }); var AppRouter = Backbone.Router.extend({ routes: { '': 'homeRoute', 'home': 'homeRoute', 'about': 'aboutRoute', }, homeRoute: function () { var homeView = new HomeView(); $("#content").html(homeView.el); }, aboutRoute: function () { var aboutView = new AboutView(); $("#content").html(aboutView.el); } }); var appRouter = new AppRouter(); Backbone.history.start(); <\/code><\/pre>\n \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435\u043b\u0435\u0433\u043a\u043e \u0447\u0435\u0442\u043a\u043e \u043e\u0442\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u043e\u0434\u043d\u0438 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445. \u0417\u0430\u0433\u043e\u0432\u0430\u0440\u0438\u0432\u0430\u044f \u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445, \u043c\u043d\u043e\u0433\u0438\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u044b \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043e \u043c\u043d\u043e\u0433\u043e\u043c \u0441\u0432\u044f\u0437\u0430\u043d\u0430 \u0441 \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u0432\u0448\u0435\u0439\u0441\u044f \u0432\u044b\u0448\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 (\u043f\u043b\u044e\u0441 \u0438\u0445 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0432 JavaScript \u0438 \u0442.\u0434\u2026). <\/p>\n
\u0412 \u0434\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0439 \u044d\u0442\u043e\u0439 \u043f\u0443\u0442\u0430\u043d\u0438\u0446\u044b \u0448\u0430\u0431\u043b\u043e\u043d\u044b, \u043a\u0430\u043a \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u043e\u0441\u044c \u0432\u044b\u0448\u0435 \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e HTML, \u0438 \u043c\u043d\u043e\u0433\u0438\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u0438\u043c\u0435\u044e\u0449\u0438\u0435 \u0434\u0435\u043b\u043e \u0441 MVC, \u0430\u0441\u0441\u043e\u0446\u0438\u0438\u0440\u0443\u044e\u0442 HTML \u0441 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u0438\u043b\u0438 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u044b\u043c\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u043c\u0438 (partials). \u041e\u0434\u043d\u0430\u043a\u043e, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 Backbone \u2014 \u044d\u0442\u043e \u043a\u043e\u0434, \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 JavaScript, \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 HTML-\u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u043c. \u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 Backbone \u043f\u043e\u0447\u0442\u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0448\u0430\u0431\u043b\u043e\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u044b\u0447\u043d\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0432\u043d\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f. <\/p>\n
\u041c\u043e\u0434\u0435\u043b\u0438<\/b><\/p>\n
\u041c\u043e\u0434\u0435\u043b\u0438 \u2013 \u044d\u0442\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0430\u044f \u0440\u0430\u0437\u043d\u043e\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u044c \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0445 \u0431\u0438\u0437\u043d\u0435\u0441-\u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0438\u043b\u0438 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439. \u041f\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044e \u0414\u0436\u0435\u0440\u0435\u043c\u0438 \u0410\u0448\u043a\u0435\u043d\u0430\u0441\u0430, \u0430\u0432\u0442\u043e\u0440\u0430 Backbone, \u00ab\u043c\u043e\u0434\u0435\u043b\u0438 \u2014 \u0441\u0435\u0440\u0434\u0446\u0435\u0432\u0438\u043d\u0430 \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f JavaScript, \u0432 \u043d\u0438\u0445 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0441\u044f \u043a\u0430\u043a \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0442\u0430\u043a \u0438 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043e\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0435\u0439 \u0438\u0445 \u043b\u043e\u0433\u0438\u043a\u0438; \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f, \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u0430\u00bb. \u0410\u0448\u043a\u0435\u043d\u0430\u0441 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u043c\u0435\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043c\u0435\u0436\u0434\u0443 \u044d\u0442\u0438\u043c\u0438 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0438 \u043c\u043e\u0434\u0435\u043b\u044f\u043c\u0438, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u043c\u0438\u0441\u044f \u0443 \u0432\u0430\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0432 Active Record; \u0441\u043a\u043e\u0440\u0435\u0435 \u044d\u0442\u0438 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0431\u043e\u0439 \u0431\u043e\u043b\u0435\u0435 \u0443\u0437\u043a\u0443\u044e \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u0443\u044e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0438 \u043e\u0431\u043b\u0430\u0434\u0430\u044e\u0449\u0443\u044e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438, \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c\u0438 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c \u2014 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, count (\u0441\u0447\u0435\u0442). \u0412 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u0438\u0434\u0435\u044f \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 MV*-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c: \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u0439 \u0443\u0437\u0435\u043b, \u0433\u0434\u0435 \u0431\u0443\u0434\u0443\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435, \u043e\u0442\u043d\u043e\u0441\u044f\u0449\u0438\u0435\u0441\u044f \u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432\u0441\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u044d\u0442\u0438\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u0422\u0430\u043a\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c MVC \u043f\u043b\u044e\u0441 jQuery, \u043f\u0440\u0438\u0447\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435, \u043e\u0442\u043d\u043e\u0441\u044f\u0449\u0438\u0435\u0441\u044f \u043a \u043c\u043e\u0434\u0435\u043b\u0438, \u043e\u0431\u044b\u0447\u043d\u043e \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 DOM. \u0426\u0435\u043b\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0430\u043a\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u2013 \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b DOM \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0438\u0445 \u0432 \u043e\u0431\u0449\u0435\u043c \u043c\u0435\u0441\u0442\u0435, \u043e\u0442\u043a\u0443\u0434\u0430 \u0438\u0445 \u0431\u0443\u0434\u0435\u0442 \u043b\u0435\u0433\u043a\u043e \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. <\/p>\n
\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 Backbone <\/i><\/p>\n
\u0412 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u0433\u0434\u0435 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0430\u0441\u044c \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u043c\u044b \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043b\u0438\u0441\u044c \u0441 \u043c\u043e\u0434\u0435\u043b\u044f\u043c\u0438. \u0412 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u043c\u043e\u0434\u0435\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0445\u0440\u0430\u043d\u044f\u0442 \u0438\u0445 \u0432\u043d\u0435 DOM, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0440\u043e\u0436\u0434\u0430\u044e\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u00ab\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u00bb, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u044e\u0442 \u043c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0432\u0435\u0437\u0434\u0435, \u0433\u0434\u0435 \u044d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e. \u0418\u0442\u0430\u043a, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0438\u0441\u0442\u0438\u043d\u044b, \u0438 \u044d\u0442\u043e \u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441.<\/p>\n
var MessageView = Backbone.View.extend({
template: _.template($(‘#message-template’).html()),
events: {
‘click #button’: ‘updateModel’
},
updateModel: function (event) { <\/p>\n
this.model.set({ name: $("#name").val() }); $("#name").html(''); }, initialize: function () { _.bindAll(this, 'render'); this.listenTo(this.model, "change", this.render); }, render: function () { this.$('#message').html(this.template(this.model.toJSON())); return this; } }); var NameView = Backbone.View.extend({ template: _.template($('#name-template').html()), initialize: function () { _.bindAll(this, 'render'); this.listenTo(this.model, "change", this.render); }, render: function () { this.$el.html(this.template(this.model.toJSON())); return this; } }); var Person = Backbone.Model.extend({ defaults: { name: '' } }); var person = new Person(); var messageView = new MessageView({ el: $('#message-container'), model: person }); var nameView = new NameView({ el: $('#name-container'), model: person }); <\/code><\/pre>\n \u042f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b \u0432\u044b\u0448\u0435\u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043d\u043e\u0432\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0435 \u0441 \u0442\u0435\u043c \u0436\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c \u043c\u043e\u0434\u0435\u043b\u0438 Person, \u0447\u0442\u043e \u0438 \u0448\u0430\u0431\u043b\u043e\u043d. \u0412\u044b\u0448\u0435 \u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u043b \u043c\u043e\u0434\u0435\u043b\u044c Person, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0442\u044c \u043a\u043e\u0434, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u0432\u044b\u0437\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0430 Backbone.Model.extend(), \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u0434\u043b\u044f \u043c\u043e\u0434\u0435\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u2014 \u043f\u043e\u0434\u043e\u0431\u043d\u043e \u043a\u043b\u0430\u0441\u0441\u0430\u043c \u0432 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u044f\u0437\u044b\u043a\u0430\u0445. <\/p>\n
\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: \u043e\u0431\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043b\u0443\u0448\u0430\u044e\u0442 \u043e\u0434\u043d\u0443 \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043e\u0431\u044a\u0435\u043a\u0442 \u043c\u043e\u0434\u0435\u043b\u0438 Person (\u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f) \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f. \u0415\u0441\u043b\u0438 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u0438\u043d, \u0442\u043e \u043c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b \u043a \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c DOM \u043c\u043e\u0436\u043d\u043e \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0430 \u043c\u043e\u0434\u0435\u043b\u044c \u0441\u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0442\u044c \u0438\u0445 \u0432\u0441\u0435.<\/p>\n
\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043e\u0441\u0442\u0443\u043f\u0430 (\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0449\u0438\u043a\u0438 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u0435\u043b\u0438) \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432 \u0432\u044b\u0448\u0435\u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u043b\u0438\u0441\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439\u2026 \u043e \u0442\u0430\u043a\u043e\u043c \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u0438 \u0447\u0430\u0441\u0442\u043e \u0437\u0430\u0431\u044b\u0432\u0430\u044e\u0442.<\/p>\n
\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 AngularJS <\/i><\/p>\n
\u0418\u0434\u0435\u044f \u043e\u0434\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438, \u0445\u0440\u0430\u043d\u044f\u0449\u0435\u0439 \u0438\u0441\u0442\u0438\u043d\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u00ab\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438\u00bb \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0432 AngularJS, \u043e\u0434\u043d\u0430\u043a\u043e AngularJS \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u043e\u0431\u044a\u0435\u043a\u0442\u044b POJO, \u0430 \u0437\u0430\u0442\u0435\u043c \u00ab\u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c\u00bb \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u0438 \u043a \u043b\u044e\u0431\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c, \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u044f\u0435\u043c\u044b\u043c \u043a \u043e\u0431\u044a\u0435\u043a\u0442\u0443 $scope \u0438 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u043c \u043a \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u00abng-model\u00bb. \u0417\u0430\u0442\u0435\u043c \u044d\u0442\u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u043f\u043e\u0432\u0435\u0449\u0430\u044e\u0442 \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u043d\u044b\u0435 \u043a \u044d\u0442\u043e\u0439 \u0436\u0435 \u043c\u043e\u0434\u0435\u043b\u0438, \u0438 \u044d\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b DOM \u00ab\u0437\u043d\u0430\u044e\u0442\u00bb, \u043a\u0430\u043a \u0438\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f. \u0412 \u043e\u0431\u0449\u0435\u043c, \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0435\u043c\u0430\u043b\u043e \u00ab\u043c\u0430\u0433\u0438\u0438\u00bb, \u043d\u043e \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 AngularJS \u043d\u0430\u0441\u0442\u0430\u0438\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u044d\u0442\u043e \u00ab\u0431\u0435\u043b\u0430\u044f \u043c\u0430\u0433\u0438\u044f\u00bb.
\u0412\u043e\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 AngularJS \u0441 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445. \u0417\u0434\u0435\u0441\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e, \u043a\u0430\u043a \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n
<h1>Simple Data Binding with AngularJS<\/h1> <br \/> <div ng-app> Name: <input type="text" ng-model="person.name" \/> <br \/><br \/> Welcome to AngularJS {{person.name}} <br\/> Person: {{person.name}} <\/div> <\/code><\/pre>\n AngularJS \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0434\u043b\u044f \u0432\u0430\u0441 \u043e\u0431\u044a\u0435\u043a\u0442 person \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c ng-model. \u0418\u0442\u0430\u043a, \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u043e\u0447\u0435\u043d\u044c \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u0435\u043d \u0438 \u043d\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 JavaScript.
\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0437\u0434\u0435\u0441\u044c \u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u043b\u0443\u043a\u0430\u0432\u0438\u043b: \u0432\u0435\u0434\u044c \u043c\u044b \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0438 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u0432 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0447\u0430\u0441\u0442\u044f\u043c\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u043b\u043e\u0441\u044c \u0432 Backbone; \u043e\u0434\u043d\u0430\u043a\u043e, \u0442\u0430\u043a \u0438\u043b\u0438 \u0438\u043d\u0430\u0447\u0435, \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438 \u0432 AngularJS \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043c\u0435\u043d\u044c\u0448\u0435 \u043a\u043e\u0434\u0430.<\/p>\n
\u0425\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445<\/b><\/p>\n
\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 AngularJS <\/i><\/p>\n
AngularJS \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u0432\u0443\u043c\u044f \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0432\u044b\u0437\u043e\u0432\u044b AJAX \u0432 \u043c\u0430\u043d\u0435\u0440\u0435, \u043e\u0447\u0435\u043d\u044c \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e\u0449\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u044e $.ajax \u0438\u0437 jQuery, \u0447\u0435\u0440\u0435\u0437 $http. \u0412\u043e \u0432\u0442\u043e\u0440\u044b\u0445, \u0435\u0441\u043b\u0438 \u0432\u0430\u0448 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0438\u0441\u0442\u044b\u043c RESTful-\u0441\u0435\u0440\u0432\u0438\u0441\u043e\u043c, AngularJS \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043b\u0430\u0441\u0441 $resource, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0432\u044b\u0437\u043e\u0432\u044b RESTful-\u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442\u0441\u044f \u043a\u0440\u0430\u0439\u043d\u0435 \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u044b\u043c\u0438. <\/p>\n
\u041f\u0440\u0438\u043c\u0435\u0440 $http <\/i><\/p>\napp.factory('myService', function($http) { return { getFooOldSchool: function(callback) { $http.get('foo.json').success(callback); } } }); app.controller('MainCtrl', function($scope, myService) { myService.getFooOldSchool(function(data) { $scope.foo = data; }); }); \u041f\u0440\u0438\u043c\u0435\u0440 $resource var Todo = $resource('\/api\/1\/todo\/:id'); \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c todo var todo1 = new Todo(); todo1.foo = 'bar'; todo1.something = 123; todo1.$save(); \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c todo var todo2 = Todo.get({id: 123}); todo2.foo += '!'; todo2.$save(); \/\/ \u0443\u0434\u0430\u043b\u044f\u0435\u043c todo Todo.$delete({id: 123}); <\/code><\/pre>\n \u041f\u0440\u0438\u043c\u0435\u0440 \u0441 Backbone<\/i> <\/p>\n
\u0412 Backbone \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u044b \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442\u0435 \u0441 RESTful API, \u043d\u043e \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u0437 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 Backbone.sync(). \u0412\u044b \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442\u0435 \u0432\u0430\u0448\u0435\u0439 \u043c\u043e\u0434\u0435\u043b\u0438, \u0433\u0434\u0435 \u0440\u0435\u0441\u0443\u0440\u0441 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 (URL), \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c save.<\/p>\n
var UserModel = Backbone.Model.extend({
urlRoot: ‘\/user’,
defaults: {
name: »,
email: »
} <\/p>\n
}); var user = new Usermodel(); \/\/ \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: \u0443 \u043d\u0430\u0441 \u043d\u0435 \u0437\u0430\u0434\u0430\u043d `id` var userDetails = { name: 'Craig', email: 'craigmc@funnyant.com' }; \/\/ \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 `id`, \u0441\u0435\u0440\u0432\u0435\u0440 \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \/\/ POST \/user \u0441 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 {name:'Craig', email: 'craigmc@funnyant.com'} \/\/ \u0421\u0435\u0440\u0432\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043e\u0442\u0432\u0435\u0442, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043d\u043e\u0432\u044b\u0439 `id` user.save(userDetails, { success: function (user) { alert(user.toJSON()); } }) <\/code><\/pre>\n \u041f\u0440\u0438\u043c\u0435\u0440 \u0441 Ember <\/i><\/p>\n
\u0412\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 Ember \u0435\u0441\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c Ember Data, \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435 \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u0432 \u0441\u043e\u0441\u0442\u0430\u0432 \u044f\u0434\u0440\u0430 \u044d\u0442\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u043d\u043e \u043f\u0440\u0438\u0437\u0432\u0430\u043d\u043d\u044b\u0439 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043d\u0430\u0434\u0435\u0436\u043d\u043e\u0435 \u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c\u043e\u0441\u0442\u0438\/\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445. \u041e\u043d \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u043d\u043e\u0433\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u043f\u0440\u0438\u0441\u0443\u0449\u0438\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c ORM \u043d\u0430\u043f\u043e\u0434\u043e\u0431\u0438\u0435 ActiveRecord, \u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d \u0438\u043c\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 JavaScript \u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u041d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 Ember Core \u0433\u043e\u0442\u043e\u0432\u0438\u0442\u0441\u044f \u0432\u044b\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u044e v1.0, \u043d\u043e \u043f\u043e\u043a\u0430 \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u043b\u0430 \u044d\u0442\u043e\u0433\u043e, \u0442\u0430\u043a \u0447\u0442\u043e \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 Ember \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u044b $.ajax \u0438\u0437 jQuery, \u0442\u043e\u0447\u043d\u043e \u043a\u0430\u043a \u0432\u044b\u0448\u0435 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 AngularJS \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 $http.<\/p>\n
\u0412\u0441\u0435 \u043c\u044b \u0432 \u043e\u0434\u043d\u043e\u0439 \u043b\u043e\u0434\u043a\u0435<\/b><\/p>\n
\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u044b\u043b\u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u044b MV*-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 JavaScript, \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0439 \u0432 \u044d\u0442\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445. \u042f \u043f\u043e\u043f\u044b\u0442\u0430\u043b\u0441\u044f \u0434\u043e\u043d\u0435\u0441\u0442\u0438 \u0438\u0434\u0435\u044e \u043e \u0442\u043e\u043c, \u0447\u0442\u043e, \u0432 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438, \u0432\u0441\u0435 \u044d\u0442\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0438. \u0421\u0442\u043e\u0438\u0442 \u0432\u0430\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0438 \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u043e\u043d\u0438 \u0441\u0442\u044b\u043a\u0443\u044e\u0442\u0441\u044f \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c \u2013 \u0438 \u0432\u044b \u043b\u0435\u0433\u043a\u043e \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0438\u0437 \u043d\u0438\u0445 \u0442\u043e\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \t\t\t\t<\/p>\n