{"id":227853,"date":"2014-06-27T13:21:03","date_gmt":"2014-06-27T09:21:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=227853"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=227853","title":{"rendered":"<span class=\"post_title\">\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 Javascript MVC \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441 Framework7, RequireJS \u0438 Handlebars<\/span>"},"content":{"rendered":"<div class=\"content html_format\"> \t\t\t<img decoding=\"async\" src=\"http:\/\/habrastorage.org\/getpro\/habr\/post_images\/f25\/4b7\/0bf\/f254b70bff6f5854118acf5974c58f1f.png\" align=\"left\"\/>\u041d\u0435\u0434\u0430\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u043e \u043c\u043d\u043e\u0439 \u0441\u0442\u0430\u043b\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 IPhone \u0438 Android \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u043f\u044b\u0442\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u0434 IOS \u0443 \u043c\u0435\u043d\u044f \u0440\u0430\u043d\u0435\u0435 \u043d\u0435 \u0431\u044b\u043b\u043e, \u0434\u0430 \u0438 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043d\u0430 \u043e\u0431\u0435\u0438\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u0445. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0431\u044b\u043b \u0432\u044b\u0431\u0440\u0430\u043d \u0431\u044b\u043b \u0432\u044b\u0431\u0440\u0430\u043d Javascript \u0438 PhoneGap.<\/p>\n<p>  \u0418 \u0435\u0441\u043b\u0438 \u0441 \u044f\u0437\u044b\u043a\u043e\u043c \u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e, \u0442\u043e \u0434\u0430\u043b\u0435\u0435 \u0431\u044b\u043b\u043e \u043c\u043d\u043e\u0433\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432.<br \/>   \u0425\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0447\u0442\u043e \u0431\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u043b\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 IOS7 \u0438 \u0431\u044b\u043b\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 native \u043f\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u044b. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043d\u0435 \u0431\u044b\u043b\u043e \u0436\u0435\u043b\u0430\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u00ab\u043c\u043e\u043d\u0441\u0442\u0440\u043e\u0432\u00bb, \u043d\u0430 \u043f\u043e\u0434\u043e\u0431\u0438\u0438 dojo \u0438\u043b\u0438 jquery mobile. c \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0443\u0434\u043e\u0431\u043d\u0443\u044e \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u0443\u044e MVC \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u0412 \u0438\u0442\u043e\u0433\u0435 \u0432 \u0444\u0438\u043d\u0430\u043b \u043c\u043e\u0435\u0433\u043e \u043b\u0438\u0447\u043d\u043e\u0433\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0432\u044b\u0448\u043b\u0438:<br \/>   \u2014 <b>Ionic framework:<\/b> <a href=\"http:\/\/ionicframework.com\/\">http:\/\/ionicframework.com\/<\/a> <br \/>   \u2014 <b>Framework7:<\/b> <a href=\"http:\/\/www.idangero.us\/framework7\/\">http:\/\/www.idangero.us\/framework7\/<\/a><br \/>   <a name=\"habracut\"><\/a><br \/>  \u0423 \u0418\u043e\u043d\u0438\u043a\u0430 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u043d\u0435 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0430\u0441\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f, \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438 \u0437\u043d\u0430\u043a\u043e\u043c\u0430\u044f \u043f\u043e AngularJs \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043a\u043e\u0434\u0430. \u041d\u043e \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0432\u044b\u0445 \u043f\u043e\u043f\u044b\u0442\u043e\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430\u0441\u0442\u0443\u043f\u0438\u043b\u043e \u0440\u0430\u0437\u043e\u0447\u0430\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u0417\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 Iphone5 \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u043b\u043e. \u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 \u0438\u043b\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0431\u044b\u043b\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u043d\u0430 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u043c\u0435\u0436\u0434\u0443 \u043d\u0430\u0436\u0430\u0442\u0438\u0435\u043c \u0438 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0435\u043c. \u041d\u0430 \u043f\u043e\u0434\u043e\u0431\u0438\u0438 300\u043c\u0441 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435. \u041d\u043e \u043f\u043e \u0437\u0430\u044f\u0432\u043b\u0435\u043d\u0438\u044f\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0435\u0439 \u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 fastclick\u2026 \u0421\u0442\u0440\u0430\u043d\u043d\u043e. \u0422\u0430\u043a \u0436\u0435 \u0434\u0430\u0436\u0435 \u0432 \u043f\u0440\u043e\u0441\u0442\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0430\u043c\u0438 \u0431\u044b\u043b\u0438 \u0437\u0430\u043c\u0435\u0442\u043d\u044b \u043f\u043e\u0434\u0442\u043e\u0440\u043c\u0430\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u0441\u043b\u0435 \u043f\u0430\u0440\u044b \u0434\u043d\u0435\u0439 \u0447\u0442\u0435\u043d\u0438\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0438 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u044f \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u043d\u0430\u0434\u043e \u0438\u0441\u043a\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0435\u0449\u0435.<\/p>\n<p>  \u0414\u0430\u043b\u044c\u0448\u0435 \u044f \u0432\u0435\u0440\u043d\u0443\u043b\u0441\u044f \u043a Framework7. \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043b \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0433\u043b\u044f\u043d\u0443\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 kitchen sink \u0438 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u044b\u0442\u0430\u043b wow \u044d\u0444\u0444\u0435\u043a\u0442. \u041d\u0430 IPhone \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u043e, \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u0438 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 native. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u0434\u0432\u0443\u043c\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u043c\u0438\u043d\u0443\u0441\u0430\u043c\u0438:  <\/p>\n<ul>\n<li>\u041d\u0430 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f. \u0421\u0435\u0439\u0447\u0430\u0441 \u043e\u043d\u0430 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0430\u044f (<a href=\"http:\/\/www.idangero.us\/framework7\/docs\/\">http:\/\/www.idangero.us\/framework7\/docs\/<\/a>).<\/li>\n<li>\u0412\u043e \u0432\u0441\u0435\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u043a\u043e\u0434 \u0431\u044b\u043b \u0432 \u043e\u0434\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435-\u043f\u0440\u043e\u0441\u0442\u044b\u043d\u0435 \u0432 jquery-like \u0444\u043e\u0440\u043c\u0430\u0442\u0435. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0430 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0438\u0437 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u0442.\u043f.<\/li>\n<\/ul>\n<p>  \u0412 \u043e\u0431\u0449\u0435\u043c \u044f \u043f\u043e\u0434\u0442\u044f\u043d\u0443\u043b \u0441\u0432\u043e\u0438 \u0442\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0437\u043d\u0430\u043d\u0438\u044f, \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438 \u0441\u043c\u043e\u0433 \u0440\u0435\u0448\u0438\u0442\u044c \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0437\u0430\u0434\u0430\u0447\u0443 \u043f\u043e \u0441\u043e\u0432\u043c\u0435\u0449\u0435\u043d\u0438\u044e Framework7 \u0438 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0433\u043e MVC \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b RequireJs, \u0434\u043b\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u2013 Handlebars.<\/p>\n<p>  \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u043b \u043f\u0430\u0440\u043e\u0447\u043a\u0443 \u0443\u0447\u0435\u0431\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0438 \u0441\u0435\u0439\u0447\u0430\u0441 \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0438\u043c\u0438 \u0441 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e\u043c. \u041d\u0430\u0434\u0435\u044e\u0441\u044c \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u044b, \u043a\u0430\u043a \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c, \u0442\u0430\u043a \u0438 \u0431\u043e\u043b\u0435\u0435 \u043e\u043f\u044b\u0442\u043d\u044b\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043a\u0430 \u0435\u0449\u0435 \u043d\u0435 \u0437\u043d\u0430\u044e\u0442 \u043f\u0440\u043e \u0434\u0430\u043d\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a.<\/p>\n<h4>\u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c<\/h4>\n<p>  \u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438:  <\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/nolimits4web\/Framework7\">Framework7<\/a><\/li>\n<li><a href=\"http:\/\/handlebarsjs.com\/\">Handlebars<\/a> \u2013 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0434\u043b\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 <\/li>\n<li><a href=\"http:\/\/requirejs.org\/\">RequireJS<\/a> \u2013 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/li>\n<li>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u043a RequireJs \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432:<br \/> \n<ul>\n<li><a href=\"https:\/\/github.com\/requirejs\/text\">text<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/epeli\/requirejs-hbs\">hbs<\/a><\/li>\n<\/ul>\n<\/li>\n<li>\u0410 \u0442\u0430\u043a\u0436\u0435 \u0445\u043e\u0447\u0443 \u0432\u0430\u0441 \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c \u0441 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u0438\u043a\u043e\u043d\u043e\u043a \u2013 ionicons <a href=\"http:\/\/ionicons.com\/\">http:\/\/ionicons.com\/<\/a><\/li>\n<\/ul>\n<h4>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/getpro\/habr\/post_images\/3a3\/a51\/0ce\/3a3a510ce3e0ba24dfda9640dcb57ca9.png\" align=\"left\"\/><br \/>  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 (\u0444\u0430\u0439\u043b\u044b index.html \u0438 app.js \u043f\u043e\u043a\u0430 \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u043f\u0443\u0441\u0442\u044b\u043c\u0438)<br \/>  \u0427\u0442\u043e \u0431\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0441\u0435\u0431\u0435 \u0436\u0438\u0437\u043d\u044c \u2013 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u0430\u0440\u0445\u0438\u0432 \u0441\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u043f\u043e \u044d\u0442\u043e\u0439 \u0441\u0441\u044b\u043b\u043ae:<br \/>  <a href=\"https:\/\/www.dropbox.com\/s\/c7q1jftn1538awe\/Framework7-MVC-structure.zip\">Dropbox<\/a><br \/>  (\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0430\u0440\u0445\u0438\u0432\u0435 \u0443\u0436\u0435 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u044b \u043f\u0435\u0440\u0432\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u0444\u0430\u0439\u043b\u043e\u0432 index.html \u0438 app.js)<\/p>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u0441\u0440\u0430\u0437\u0443 \u0434\u0430\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043d\u0430 Github \u2014 \u0442\u0430\u043c \u043b\u0435\u0436\u0438\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u043e\u0439 \u0438\u0441\u0442\u043e\u0440\u0438\u0435\u0439 \u043f\u0440\u0430\u0432\u043e\u043a \u2014 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<br \/>  <a href=\"https:\/\/github.com\/philipshurpik\/Framework7-MVC-base\">https:\/\/github.com\/philipshurpik\/Framework7-MVC-base<\/a><br \/>  <br clear=\"left\"\/>  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 index.html \u0444\u0430\u0439\u043b, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438:<\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt; &lt;html class=&quot;with-statusbar-overlay&quot;&gt; &lt;head&gt; \t&lt;meta charset=&quot;utf-8&quot;&gt; \t&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui&quot;&gt; \t&lt;meta name=&quot;apple-mobile-web-app-capable&quot; content=&quot;yes&quot;&gt; \t&lt;meta name=&quot;apple-mobile-web-app-status-bar-style&quot; content=&quot;black-translucent&quot;&gt; \t&lt;title&gt;F7 Contacts MVC&lt;\/title&gt; \t&lt;link rel=&quot;stylesheet&quot; href=&quot;lib\/css\/framework7.css&quot;&gt; \t&lt;link rel=&quot;stylesheet&quot; href=&quot;lib\/css\/ionicons.css&quot;&gt; \t&lt;link rel=&quot;stylesheet&quot; href=&quot;css\/app.css&quot;&gt; &lt;\/head&gt; &lt;body&gt; &lt;div class=&quot;statusbar-overlay&quot;&gt;&lt;\/div&gt; &lt;div class=&quot;views&quot;&gt; \t&lt;div class=&quot;view view-main navbar-fixed&quot;&gt; \t\t&lt;div class=&quot;navbar&quot;&gt; \t\t\t&lt;div class=&quot;navbar-inner&quot;&gt; \t\t\t\t&lt;div class=&quot;left&quot;&gt;&lt;\/div&gt; \t\t\t\t&lt;div class=&quot;center&quot; style=&quot;left:22px&quot;&gt;Contacts&lt;\/div&gt; \t\t\t\t&lt;div class=&quot;right&quot;&gt; \t\t\t\t\t&lt;a href=&quot;contact.html&quot; class=&quot;link icon-only&quot;&gt;&lt;i class=&quot;icon icon-plus&quot;&gt;+&lt;\/i&gt;&lt;\/a&gt; \t\t\t\t&lt;\/div&gt; \t\t\t&lt;\/div&gt; \t\t&lt;\/div&gt; \t\t&lt;div class=&quot;pages&quot;&gt; \t\t\t&lt;div data-page=&quot;list&quot; class=&quot;page&quot;&gt; \t\t\t\t&lt;div class=&quot;page-content&quot;&gt; \t\t\t\t\t&lt;div class=&quot;list-block contacts-list&quot;&gt; \t\t\t\t\t\t&lt;ul&gt; \t\t\t\t\t\t\t&lt;a href=&quot;contact.html&quot; class=&quot;item-link item-content&quot;&gt; \t\t\t\t\t\t\t\t&lt;div class=&quot;item-media&quot;&gt;&lt;i class=&quot;icon ion-ios7-person&quot;&gt;&lt;\/i&gt;&lt;\/div&gt; \t\t\t\t\t\t\t\t&lt;div class=&quot;item-inner&quot;&gt; \t\t\t\t\t\t\t\t\t&lt;div class=&quot;item-title&quot;&gt;Andrey Smirnov&lt;\/div&gt; \t\t\t\t\t\t\t\t&lt;\/div&gt; \t\t\t\t\t\t\t&lt;\/a&gt; \t\t\t\t\t\t\t&lt;a href=&quot;contact.html?id={{id}}&quot; class=&quot;item-link item-content&quot;&gt; \t\t\t\t\t\t\t\t&lt;div class=&quot;item-media&quot;&gt;&lt;i class=&quot;icon ion-ios7-person&quot;&gt;&lt;\/i&gt;&lt;\/div&gt; \t\t\t\t\t\t\t\t&lt;div class=&quot;item-inner&quot;&gt; \t\t\t\t\t\t\t\t\t&lt;div class=&quot;item-title&quot;&gt;Olga Kot&lt;\/div&gt; \t\t\t\t\t\t\t\t&lt;\/div&gt; \t\t\t\t\t\t\t&lt;\/a&gt; \t\t\t\t\t\t&lt;\/ul&gt; \t\t\t\t\t&lt;\/div&gt; \t\t\t\t&lt;\/div&gt; \t\t\t&lt;\/div&gt; \t\t&lt;\/div&gt; \t&lt;\/div&gt; &lt;\/div&gt; &lt;\/body&gt; &lt;\/html&gt; &lt;script type=&quot;text\/javascript&quot; src=&quot;lib\/framework7.js&quot;&gt;&lt;\/script&gt; &lt;script type=&quot;text\/javascript&quot; src=&quot;app.js&quot;&gt;&lt;\/script&gt; <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u0432 \u0444\u0430\u0439\u043b app.js \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:  <\/p>\n<pre><code class=\"javascript\">var f7 = new Framework7({ \tmodalTitle: 'F7-MVC-Base', \tanimateNavBackIcon: true }); var mainView = f7.addView('.view-main', { \tdynamicNavbar: true }); <\/code><\/pre>\n<p>  \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443:<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/getpro\/habr\/post_images\/363\/e60\/b66\/363e60b66f74223ca3bd2daa88da0d5d.png\" align=\"left\"\/><br \/>  \u0412\u043e\u0442. \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0430 \u0438 \u043d\u0430 \u043d\u0435\u0439 \u0434\u0430\u0436\u0435 \u0447\u0442\u043e-\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c hello-world.<\/p>\n<p>  \u0414\u0430, \u0435\u0441\u043b\u0438 \u043a\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442. \u0412 Devtools Chrome \u0440\u044f\u0434\u043e\u043c \u0441 \u043a\u043e\u043d\u0441\u043e\u043b\u044c\u044e \u0435\u0441\u0442\u044c \u0432\u043a\u043b\u0430\u0434\u043a\u0430 Emulation, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0439 \u0434\u0435\u0432\u0430\u0439\u0441 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u044d\u0442\u043e\u0433\u043e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<p>  <br clear=\"all\"\/>     <\/p>\n<h3>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c RequireJs \u0438 Handlebars, \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u044b<\/h3>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u044b (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 localstorage) \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0438\u0445 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435.<br \/>  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043d\u0430\u0448\u0438 \u0444\u0430\u0439\u043b\u044b:<\/p>\n<p>  <i>1. index.html<\/i><br \/>  \u0417\u0430\u043c\u0435\u043d\u0438\u043c \u043f\u0440\u044f\u043c\u043e\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0433\u043e app.js \u0444\u0430\u0439\u043b\u0430 \u043d\u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 Require.Js  <\/p>\n<pre><code class=\"html\">&lt;script data-main=&quot;app&quot; src=&quot;lib\/require.js&quot;&gt;&lt;\/script&gt; <\/code><\/pre>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442 data-main \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 (\u044d\u0442\u043e \u043d\u0430\u0448 \u0444\u0430\u0439\u043b app.js)&#038;<br \/>  \u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u0433\u043e\u0432 ul \u2013 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u0431\u0443\u0434\u0443\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0448\u0430\u0431\u043b\u043e\u043d\u0430.<\/p>\n<p>  <i>2. app.js<\/i><br \/>  \u041f\u0435\u0440\u0435\u0434\u0435\u043b\u0430\u0435\u043c \u043d\u0430\u0448 \u0444\u0430\u0439\u043b \u0432 RequireJs \u043c\u043e\u0434\u0443\u043b\u044c:   <\/p>\n<pre><code class=\"javascript\">define('app', ['js\/list\/listController'], function(listController) { \tvar f7 = new Framework7({ \t\tmodalTitle: 'F7-MVC-Base', \t\tanimateNavBackIcon: true \t}); \tvar mainView = f7.addView('.view-main', { \t\tdynamicNavbar: true \t}); \tlistController.init(); \treturn { \t\tf7: f7, \t\tmainView: mainView \t}; }); <\/code><\/pre>\n<p>  \u0412\u0441\u0435 \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u043b\u0438 \u0432 \u043c\u043e\u0434\u0443\u043b\u044c + \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u043e\u043a\u0430 \u0435\u0449\u0435 \u043d\u0435\u0442\u0443.<\/p>\n<h3>\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430: \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435, template \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/h3>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u0434\u043b\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u0430 \u0442\u0430\u043a\u0436\u0435 handlebars template.<br \/>  \u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u0438 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/getpro\/habr\/post_images\/d47\/3be\/a62\/d473bea627d866e3ba3f044625b2ea4a.png\" align=\"left\"\/><br \/>  \u0414\u0430, \u043f\u043e\u0434\u043e\u0431\u043d\u0430\u044f \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0430 \u2013 \u043f\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u2013 \u043a\u0430\u043a \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u0447\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439, \u043c\u043e\u0434\u0435\u043b\u0435\u0439, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u0432 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f\u0445.<br \/>  <br clear=\"all\"\/>  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u0434\u043b\u044f \u0441\u043f\u0438\u0441\u043a\u0430. \u0418 \u0432 \u043d\u0435\u043c \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0448 localstorage \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043e\u0432:<\/p>\n<p>  <i>\u0424\u0430\u0439\u043b: js\/list\/listController.js<\/i>  <\/p>\n<pre><code class=\"javascript\">define([&quot;js\/list\/listView&quot;], function(ListView) {  \tfunction init() { \t\tvar contacts = loadContacts(); \t\tListView.render({ model: contacts }); \t}  \tfunction loadContacts() { \t\tvar f7Base = localStorage.getItem(&quot;f7Base&quot;); \t\tvar contacts = f7Base ? JSON.parse(f7Base) : tempInitializeStorage(); \t\treturn contacts; \t}  \tfunction tempInitializeStorage() { \t\tvar contacts = [ \t\t\t{id: &quot;1&quot;, firstName: &quot;Alex&quot;, lastName: &quot;Black&quot;, phone: &quot;+380501234567&quot; }, \t\t\t{id: &quot;2&quot;, firstName: &quot;Kate&quot;, lastName: &quot;White&quot;, phone: &quot;+380507654321&quot; } \t\t]; \t\tlocalStorage.setItem(&quot;f7Base&quot;, JSON.stringify(contacts)); \t\treturn JSON.parse(localStorage.getItem(&quot;f7Base&quot;)); \t}  \treturn { \t\tinit: init \t}; }); <\/code><\/pre>\n<p>  \u0422\u0430\u043a \u0436\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0437\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043d\u0430\u0448\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 (\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043f\u0440\u0438 \u0435\u0433\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438) \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u0430.<br \/>  <i>\u0424\u0430\u0439\u043b: js\/list\/listView.js<\/i>  <\/p>\n<pre><code class=\"javascript\">define(['hbs!js\/list\/contact-list-item'], function(template) { \tvar $ = Framework7.$;  \tfunction render(params) { \t\t$('.contacts-list ul').html(template(params.model)); \t}  \treturn { \t\trender: render \t}; }); <\/code><\/pre>\n<p>  \u0410 \u0442\u0430\u043a\u0436\u0435 \u043a\u043e\u0434 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u0430:<br \/>  <i>\u0424\u0430\u0439\u043b: js\/list\/contact-list-item.hbs<\/i>  <\/p>\n<pre><code class=\"html\">{{#.}} \t&lt;a href=&quot;contact.html?id={{id}}&quot; class=&quot;item-link item-content&quot;&gt; \t\t&lt;div class=&quot;item-media&quot;&gt;&lt;i class=&quot;icon ion-ios7-person&quot;&gt;&lt;\/i&gt;&lt;\/div&gt; \t\t&lt;div class=&quot;item-inner&quot;&gt; \t\t\t&lt;div class=&quot;item-title&quot;&gt;{{firstName}} {{lastName}}&lt;\/div&gt; \t\t&lt;\/div&gt; \t&lt;\/a&gt; {{\/.}} <\/code><\/pre>\n<p>  \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u2014 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u2014 \u0432\u0441\u0435 \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u043d\u043e \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0435 \u0438 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u0435.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0430.<\/p>\n<h3>\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 \u0432 Framework7<\/h3>\n<p>  \u041a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0430 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c html \u0444\u0430\u0439\u043b\u0435.<br \/>  \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 div c class=\u201dpage\u201d  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;page&quot; data-page=&quot;list&quot;&gt; <\/code><\/pre>\n<p>  \u0410\u0442\u0442\u0440\u0438\u0431\u0443\u0442 data-page \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0434\u043b\u044f \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430.<br \/>  \u0412\u0441\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438:  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;page-content&quot;&gt; \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u0434\u043b\u044f &lt;div class=&quot;page&quot;&gt; <\/code><\/pre>\n<p>  \u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u043b\u0438 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 html \u0441\u0441\u044b\u043b\u043a\u0443:  <\/p>\n<pre><code class=\"html\">&lt;a href=&quot;about.html&quot;&gt;Go to About page&lt;\/a&gt; <\/code><\/pre>\n<p>B\u043b\u0438 \u0438\u0437 js \u043a\u043e\u0434\u0430:   <\/p>\n<pre><code class=\"javascript\">app.mainView.loadPage('about.html'); <\/code><\/pre>\n<p>  \u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043d\u0430\u0437\u0430\u0434 (\u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439) \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e:<br \/>  \u0418\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u0430 back \u0432 \u0441\u0441\u044b\u043b\u043a\u0443:  <\/p>\n<pre><code class=\"html\">&lt;a href=&quot;index.html&quot; class=&quot;back&quot;&gt; Go back to home page &lt;\/a&gt; <\/code><\/pre>\n<p>\u0418\u043b\u0438 \u0438\u0437 js \u043a\u043e\u0434\u0430:  <\/p>\n<pre><code class=\"javascript\">app.mainView.goBack(); <\/code><\/pre>\n<p>  \u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 Framework7 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f:<br \/>  PageBeforeInit, PageInit, PageBeforeAnimation, PageAfterAnimation, PageBeforeRemove<\/p>\n<p>  \u041f\u043e\u043b\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u0445 \u0442\u0443\u0442: <br \/>  <a href=\"http:\/\/www.idangero.us\/framework7\/docs\/pages.html\">http:\/\/www.idangero.us\/framework7\/docs\/pages.html<\/a><br \/>  <a href=\"http:\/\/www.idangero.us\/framework7\/docs\/ linking-pages.html\">http:\/\/www.idangero.us\/framework7\/docs\/ linking-pages.html<\/a><\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u0435\u043c router.js<\/h3>\n<p>  \u0412\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043f\u043e\u0441\u043b\u0435 \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u043d\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 DOM \u2013 PageBeforeInit.<br \/>  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0440\u043e\u0443\u0442\u0435\u0440 (\u0444\u0430\u0439\u043b router.js) \u0438 \u043f\u043e\u043b\u043e\u0436\u0438\u043c \u0435\u0433\u043e \u0432 \u043f\u0430\u043f\u043a\u0443 js, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u0434\u043f\u0438\u0448\u0435\u043c\u0441\u044f \u043d\u0430 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f pageBeforeInit:<\/p>\n<pre><code class=\"javascript\">define(function() { \tvar $ = Framework7.$;  \tfunction init() { \t\t$(document).on('pageBeforeInit', function (e) { \t\t\tvar page = e.detail.page; \t\t\tload(page.name, page.query); \t\t});     }  \tfunction load(controllerName, query) { \t\trequire(['js\/' + controllerName + '\/'+ controllerName + 'Controller'], function(controller) { \t\t\tcontroller.init(query); \t\t}); \t}  \treturn {         init: init, \t\tload: load     }; }); <\/code><\/pre>\n<p>  \u041f\u0440\u0438 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043c\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Require \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u043d\u0430\u043c \u043c\u043e\u0434\u0443\u043b\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0432 \u043d\u0435\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0431\u044b\u043b\u0430 \u043e\u0442\u043a\u0440\u044b\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430.<\/p>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u0430\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c app.js, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043d\u0435\u0433\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0440\u043e\u0443\u0442\u0435\u0440\u0430 \u0438 \u0443\u0431\u0435\u0440\u0435\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430:  <\/p>\n<pre><code class=\"javascript\">define('app', ['js\/router'], function(Router) { \tRouter.init(); \tvar f7 = new Framework7({ \t\tmodalTitle: 'F7-MVC-Base', \t\tanimateNavBackIcon: true \t}); \tvar mainView = f7.addView('.view-main', { \t\tdynamicNavbar: true \t}); \treturn { \t\tf7: f7, \t\tmainView: mainView, \t\trouter: router \t}; }); <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043f\u043e\u0441\u043b\u0435 \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 DOM \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f pageBeforeInit.<br \/>  \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e e.detail.page.name \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0432\u043d\u044f\u0442\u044c\u0441\u044f list, \u0442\u043e \u0435\u0441\u0442\u044c \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0431\u044b\u043b\u043e \u0437\u0430\u0434\u0430\u043d\u043e \u0442\u0443\u0442 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 data-page: \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0449\u0435\u043d \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440.<\/p>\n<h3>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0430<\/h3>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0430. <br \/>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043a\u043e\u0440\u0435\u043d\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430 html \u0444\u0430\u0439\u043b contact.html (\u0435\u0441\u043b\u0438 \u0432\u044b \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043b\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438\u0437 \u0430\u0440\u0445\u0438\u0432\u0430, \u0442\u043e \u043e\u043d \u0442\u0430\u043c \u0443\u0436\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c)<br \/>  \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 contact.html \u0443\u0436\u0435 \u0431\u044b\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0440\u0430\u043d\u0435\u0435 \u0432 navbar \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u0432 \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u043f\u0438\u0441\u043a\u0430 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043e\u0432.  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;navbar&quot;&gt; \t&lt;div class=&quot;navbar-inner&quot;&gt; \t\t&lt;div class=&quot;left sliding&quot;&gt; \t\t\t&lt;a href=&quot;#&quot; class=&quot;back link&quot;&gt; \t\t\t\t&lt;i class=&quot;icon icon-back-white&quot;&gt;&lt;\/i&gt; \t\t\t\t&lt;span&gt;Back&lt;\/span&gt; \t\t\t&lt;\/a&gt; \t\t&lt;\/div&gt; \t\t&lt;div class=&quot;center contacts-header&quot;&gt;&lt;\/div&gt; \t\t&lt;div class=&quot;right contact-save-link&quot;&gt; \t\t\t&lt;a href=&quot;#&quot; class=&quot;link&quot;&gt; \t\t\t\t&lt;span&gt;Save&lt;\/span&gt; \t\t\t&lt;\/a&gt; \t\t&lt;\/div&gt; \t&lt;\/div&gt; &lt;\/div&gt; &lt;div class=&quot;pages&quot;&gt; \t&lt;div data-page=&quot;contact&quot; class=&quot;page contact-page&quot;&gt;  \t&lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430 \u0438\u043b\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u2013 \u0440\u043e\u0443\u0442\u0435\u0440 \u043f\u0440\u043e\u0431\u0443\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0444\u0430\u0439\u043b js\/contact\/contactController.<\/p>\n<p>  \u0421\u043e\u043e\u0442\u0432\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0435\u0433\u043e, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0448\u0430\u0431\u043b\u043e\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412\u043e\u0442 \u0442\u0430\u043a:<br \/>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/4b1\/991\/1e8\/4b19911e837242a7a911ebf990db2ad9.png\"\/><\/p>\n<p>  \u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 contactController.js:  <\/p>\n<pre><code class=\"javascript\">define([&quot;app&quot;,&quot;js\/contact\/contactView&quot;], function(app, ContactView) {  \tvar state = {isNew: false}; \tvar contact = null;  \tfunction init(query){ \t\tif (query && query.id) { \t\t\tvar contacts = JSON.parse(localStorage.getItem(&quot;f7Base&quot;)); \t\t\tfor (var i = 0; i&lt; contacts.length; i++) { \t\t\t\tif (contacts[i].id === query.id) { \t\t\t\t\tcontact = contacts[i]; \t\t\t\t\tstate.isNew = false; \t\t\t\t\tbreak; \t\t\t\t} \t\t\t} \t\t} \t\telse { \t\t\tcontact = { id: Math.floor((Math.random() * 100000) + 5).toString()}; \t\t\tstate.isNew = true; \t\t} \t\tContactView.render({ \t\t\tmodel: contact, \t\t\tstate: state \t\t}); \t}  \treturn { \t\tinit: init \t}; }); <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f (\u0432 query \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 id \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0430, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0435\u0433\u043e \u0438\u0437 localStorage. <br \/>  \u0415\u0441\u043b\u0438 \u043d\u0435\u0442, \u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439. \u041f\u043e\u043a\u0430 \u0447\u0442\u043e \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u043c\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0430\u043a\u0442 \u2013 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442.<\/p>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f contactView.js:  <\/p>\n<pre><code class=\"javascript\">define(['hbs!js\/contact\/contact'], function(viewTemplate) { \tvar $ = Framework7.$;  \tfunction render(params) { \t\t$('.contact-page').html(viewTemplate({ model: params.model })); \t\t$('.contacts-header').text(params.state.isNew ? &quot;New contact&quot; : &quot;Contact&quot;); \t}  \treturn { \t\trender: render \t} }); <\/code><\/pre>\n<p>  \u0418 \u0448\u0430\u0431\u043b\u043e\u043d contact.hbs:  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;page-content&quot;&gt; \t&lt;form id=&quot;contactEdit&quot; class=&quot;list-block&quot;&gt; \t\t&lt;ul&gt; \t\t\t&lt;input name=&quot;id&quot; type=&quot;hidden&quot; value=&quot;{{model.id}}&quot;&gt; \t\t\t&lt;li&gt; \t\t\t\t&lt;div class=&quot;item-content&quot;&gt; \t\t\t\t\t&lt;div class=&quot;item-media&quot;&gt;&lt;i class=&quot;icon ion-ios7-football-outline&quot;&gt;&lt;\/i&gt;&lt;\/div&gt; \t\t\t\t\t&lt;div class=&quot;item-inner&quot;&gt; \t\t\t\t\t\t&lt;div class=&quot;item-input&quot;&gt; \t\t\t\t\t\t\t&lt;input name=&quot;firstName&quot; type=&quot;text&quot; placeholder=&quot;First name&quot; value=&quot;{{model.firstName}}&quot;&gt; \t\t\t\t\t\t&lt;\/div&gt; \t\t\t\t\t&lt;\/div&gt; \t\t\t\t&lt;\/div&gt; \t\t\t&lt;\/li&gt; \t\t\t&lt;li&gt; \t\t\t\t&lt;div class=&quot;item-content&quot;&gt; \t\t\t\t\t&lt;div class=&quot;item-media&quot;&gt;&lt;i class=&quot;icon ion-ios7-football-outline&quot;&gt;&lt;\/i&gt;&lt;\/div&gt; \t\t\t\t\t&lt;div class=&quot;item-inner&quot;&gt; \t\t\t\t\t\t&lt;div class=&quot;item-input&quot;&gt; \t\t\t\t\t\t\t&lt;input name=&quot;lastName&quot; type=&quot;text&quot; placeholder=&quot;Last name&quot; value=&quot;{{model.lastName}}&quot;&gt; \t\t\t\t\t\t&lt;\/div&gt; \t\t\t\t\t&lt;\/div&gt; \t\t\t\t&lt;\/div&gt; \t\t\t&lt;\/li&gt; \t\t\t&lt;li&gt; \t\t\t\t&lt;div class=&quot;item-content&quot;&gt; \t\t\t\t\t&lt;div class=&quot;item-media&quot;&gt;&lt;i class=&quot;icon ion-ios7-telephone-outline&quot;&gt;&lt;\/i&gt;&lt;\/div&gt; \t\t\t\t\t&lt;div class=&quot;item-inner&quot;&gt; \t\t\t\t\t\t&lt;div class=&quot;item-input&quot;&gt; \t\t\t\t\t\t\t&lt;input name=&quot;phone&quot; type=&quot;tel&quot; placeholder=&quot;Phone&quot; value=&quot;{{model.phone}}&quot;&gt; \t\t\t\t\t\t&lt;\/div&gt; \t\t\t\t\t&lt;\/div&gt; \t\t\t\t&lt;\/div&gt; \t\t\t&lt;\/li&gt; \t\t&lt;\/ul&gt; \t&lt;\/form&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u041d\u0443 \u0447\u0442\u043e \u0436\u0435. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043d\u0430\u0448\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0430:<br \/>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/47c\/be9\/1ce\/47cbe91ce9194bc798e6a2d30d5bdbb5.png\"\/><\/p>\n<p>  \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c.<br \/>  \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f.<\/p>\n<h3>\u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043e\u0432<\/h3>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043a\u043d\u043e\u043f\u043a\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c.<br \/>  \u041a\u043e\u043d\u0435\u0447\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u0440\u0430\u0437\u0443 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0435 \u0432\u043e\u0442 \u0442\u0430\u043a:  <\/p>\n<pre><code class=\"javascript\">$(\u2018.contact-save-link\u2019).on(\u2018click\u2019, function() {  \/\/ some code here }); <\/code><\/pre>\n<p>  \u041d\u043e \u0442\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0445\u043e\u0440\u043e\u0448\u043e, \u0438 \u043b\u0443\u0447\u0448\u0435 \u043e\u0442\u0434\u0435\u043b\u044f\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 DOM \u0438 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0438 \u043c\u043e\u0434\u0435\u043b\u044f\u043c\u0438.<br \/>  \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043c \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 \u043d\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438 \u0441\u0430\u043c\u0443 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443.<br \/>  \u0412 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 bindings:  <\/p>\n<pre><code class=\"javascript\">var bindings = [{ \t\telement: '.contact-save-link', \t\tevent: 'click', \t\thandler: saveContact \t}]; <\/code><\/pre>\n<p>  \u041f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u044d\u0442\u043e\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 params \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435.<\/p>\n<p>  \u0418 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e-\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a:  <\/p>\n<pre><code class=\"javascript\">function saveContact() { \/\/ some code here } <\/code><\/pre>\n<p>   \u0410 \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u043e \u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u043a\u043e\u043d\u0444\u0438\u0433\u0443 \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044e bindEvents:  <\/p>\n<pre><code class=\"javascript\">\tfunction bindEvents(bindings) { \t\tfor (var i in bindings) { \t\t\t$(bindings[i].element).on(bindings[i].event, bindings[i].handler); \t\t} \t} <\/code><\/pre>\n<p>  \u0418 \u0435\u0435 \u0432\u044b\u0437\u043e\u0432 \u0438\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 render:  <\/p>\n<pre><code class=\"javascript\">bindEvents(params.bindings); <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 \u0432 \u0444\u043e\u0440\u043c\u0443:<br \/>  \u0414\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 saveContact:<\/p>\n<pre><code class=\"javascript\">function saveContact() { \t\tvar contacts = JSON.parse(localStorage.getItem(&quot;f7Base&quot;)) \t\tvar newContact = app.f7.formToJSON('#contactEdit'); \t\tif (state.isNew) { \t\t\tcontacts.push(newContact) \t\t} \t\telse { \t\t\tfor (var i = 0; i&lt; contacts.length; i++) { \t\t\t\tif (contacts[i].id === newContact.id) { \t\t\t\t\tcontacts[i] = newContact; \t\t\t\t\tbreak; \t\t\t\t} \t\t\t} \t\t} \t\tlocalStorage.setItem(&quot;f7Base&quot;, JSON.stringify(contacts)); \t\tapp.router.load('list'); \t\tapp.mainView.goBack(); \t} <\/code><\/pre>\n<p>  \u0422\u0430\u043a \u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0441\u0440\u0430\u0437\u0443 \u0432 localStorage.<br \/>  \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0434\u0432\u0435 \u0441\u0442\u0440\u043e\u0447\u043a\u0438 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0437\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0442 \u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 (\u0441\u043f\u0438\u0441\u043e\u043a), \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 listController.<\/p>\n<p>  \u0423 \u043d\u0430\u0441 \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442!<\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0438:<\/h3>\n<p>  \u041d\u043e \u0442\u0430\u043a \u043e\u043f\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0432 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0435 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e. \u041a \u0442\u043e\u043c\u0443 \u0436\u0435 \u0438\u043d\u043e\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u2013 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>  \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c \u0432 \u0444\u0430\u0439\u043b\u0435 js\/contactModel.js.<br \/>  \u0417\u0430 \u043e\u0434\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043d\u0435\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430.<\/p>\n<pre><code class=\"javascript\">define(['app'],function(app) {  \tfunction Contact(values) { \t\tvalues = values || {}; \t\tthis.id = values['id'] || Math.floor((Math.random() * 100000) + 5).toString();  \t\tthis.firstName = values['firstName'] || ''; \t\tthis.lastName = values['lastName'] || ''; \t\tthis.phone = values['phone'] || ''; \t}  \tContact.prototype.setValues = function(formInput) { \t\tfor(var field in formInput){ \t\t\tif (this[field] !== undefined) { \t\t\t\tthis[field] = formInput[field]; \t\t\t} \t\t} \t};  \tContact.prototype.validate = function() { \t\tvar result = true; \t\tif (!this.firstName && !this.lastName) { \t\t\tresult = false; \t\t} \t\treturn result; \t};  \treturn Contact; });  <\/code><\/pre>\n<p>  \u0417\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0435 \u0432 \u0441\u0430\u043c \u043e\u0431\u044a\u0435\u043a\u0442, \u0430 \u0432 \u0435\u0433\u043e \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u0438\u043b\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0432 JSON \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0431\u0435\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. <\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u043c\u043e\u0434\u0435\u043b\u044c \u0432 contactController:<br \/>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439:  <\/p>\n<pre><code class=\"javascript\">define([&quot;app&quot;,&quot;js\/contact\/contactView&quot;, &quot;js\/contactModel&quot;], function(app, ContactView, Contact) <\/code><\/pre>\n<p>  \u0418\u0437\u043c\u0435\u043d\u0438\u043c \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 init \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u0438\u0435 \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0430:  <\/p>\n<pre><code class=\"javascript\">contact = new Contact(contacts[i]); <\/code><\/pre>\n<p>  \u0438  <\/p>\n<pre><code class=\"javascript\">contact = new Contact(); <\/code><\/pre>\n<p>  \u0418 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e save, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0432 \u043d\u0435\u0435 \u0437\u0430\u043f\u0443\u0441\u043a \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043c\u043e\u0434\u0435\u043b\u0438:  <\/p>\n<pre><code class=\"javascript\">function saveContact() { \t\tvar formInput = app.f7.formToJSON('#contactEdit'); \t\tcontact.setValues(formInput); \t\tif (!contact.validate()) { \t\t\tapp.f7.alert(&quot;First name and last name are empty&quot;); \t\t\treturn; \t\t} \t\tvar contacts = JSON.parse(localStorage.getItem(&quot;f7Base&quot;)); \t\tif (state.isNew) { \t\t\tcontacts.push(contact); \t\t} \t\telse { \t\t\tfor (var i = 0; i&lt; contacts.length; i++) { \t\t\t\tif (contacts[i].id === contact.id) { \t\t\t\t\tcontacts[i] = contact; \t\t\t\t\tbreak; \t\t\t\t} \t\t\t} \t\t} \t\tlocalStorage.setItem(&quot;f7Base&quot;, JSON.stringify(contacts)); \t\tapp.mainView.goBack(); \t\tapp.router.load('list'); \t} <\/code><\/pre>\n<p>  \u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0433\u043e\u0442\u043e\u0432\u043e.<\/p>\n<h3>Swipe to delete<\/h3>\n<p>  \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043e\u0432.<br \/>  \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0436\u0435\u0441\u0442\u0430 Swipe To Delete \u0432 \u0441\u043f\u0438\u0441\u043a\u0435.<br \/>  \u041c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432:  <\/p>\n<pre><code class=\"html\">{{#.}} \t&lt;li id=&quot;{{id}}&quot; class=&quot;swipeout&quot;&gt; \t\t&lt;a href=&quot;contact.html?id={{id}}&quot; class=&quot;item-link item-content swipeout-content&quot;&gt; \t\t\t&lt;div class=&quot;item-media&quot;&gt;&lt;i class=&quot;icon ion-ios7-person&quot;&gt;&lt;\/i&gt;&lt;\/div&gt; \t\t\t&lt;div class=&quot;item-inner&quot;&gt; \t\t\t\t&lt;div class=&quot;item-title&quot;&gt;{{firstName}} {{lastName}}&lt;\/div&gt; \t\t\t&lt;\/div&gt; \t\t&lt;\/a&gt; \t\t&lt;div class=&quot;swipeout-actions&quot;&gt; \t\t\t&lt;div class=&quot;swipeout-actions-inner&quot;&gt; \t\t\t\t&lt;a href=&quot;#&quot; class=&quot;swipeout-delete&quot;&gt;Delete&lt;\/a&gt; \t\t\t&lt;\/div&gt; \t\t&lt;\/div&gt; \t&lt;\/li&gt; {{\/.}} <\/code><\/pre>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 listController \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435:  <\/p>\n<pre><code class=\"javascript\">var bindings = [{ \t\telement: '.swipeout', \t\tevent: 'deleted', \t\thandler: itemDeleted \t}]; <\/code><\/pre>\n<p>  \u0418 \u0434\u0430\u043b\u044c\u0448\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u043e\u0439 \u0432 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0430\u0445 \u2013 \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438 \u0442\u0430\u043c \u043f\u043e\u0434\u043f\u0438\u0448\u0435\u043c\u0441\u044f \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 bindEvents(bindings)<\/p>\n<p>  \u0410 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f:  <\/p>\n<pre><code class=\"javascript\">function itemDeleted(e) { \t\tvar id = e.srcElement.id; \t\tvar contacts = JSON.parse(localStorage.getItem(&quot;f7Base&quot;)); \t\tfor (var i = 0; i &lt; contacts.length; i++) { \t\t\tif (contacts[i].id === id) { \t\t\t\tcontacts.splice(i, 1); \t\t\t} \t\t} \t\tlocalStorage.setItem(&quot;f7Base&quot;, JSON.stringify(contacts)); \t} <\/code><\/pre>\n<p>  \u0421\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<br \/>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/b14\/6b1\/ca0\/b146b1ca00af4c018e4b023cb8fd30cf.png\" align=\"left\"\/><img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/431\/27f\/c93\/43127fc933b14efa9ccb5289aae26957.png\"\/><\/p>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>  \u0423 \u043d\u0430\u0441 \u0432\u044b\u0448\u043b\u043e \u0433\u043e\u0442\u043e\u0432\u043e\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 MVC \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Framework7.<br \/>  \u0410 \u0441\u0430\u043c Framework7 \u0432 \u0441\u0432\u044f\u0437\u043a\u0435 \u0441 Phonegap \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0435 native-like \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0434\u043b\u044f IOS. \u0427\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043b\u043e\u0445\u043e \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 ObjectiveC. <br \/>  \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043c\u044b \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u0440\u043e\u0441\u0441-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0438 \u043f\u043b\u0430\u0432\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 Android 4.4 (\u0438 \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0442\u0430\u043a \u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0438 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445). <br \/>  \u0414\u043b\u044f \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043d\u0435\u0434\u043e\u0440\u043e\u0433\u0438\u0445 Android \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 Android, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438, \u0447\u0442\u043e \u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0442\u043e\u0436\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u0438\u0435\u043c\u043b\u0438\u043c\u043e\u0435 \u0431\u044b\u0441\u0442\u0440\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 UI.<\/p>\n<p>  \u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u0441\u0442\u043e\u0440\u0438\u0435\u0439 \u043f\u0440\u0430\u0432\u043e\u043a \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0442\u0443\u0442:<br \/>  <a href=\"https:\/\/github.com\/philipshurpik\/Framework7-MVC-base\">https:\/\/github.com\/philipshurpik\/Framework7-MVC-base<\/a><\/p>\n<p>  \u0422\u0430\u043a \u0436\u0435 \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u044b\u0439 \u0443\u0447\u0435\u0431\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043e\u0432, \u0438\u043c\u0435\u044e\u0449\u0438\u0439 \u0431\u043e\u043b\u044c\u0448\u0435 \u0444\u0438\u0447 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 Framework7. \u0412 \u043d\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u043b\u0435\u0432\u0430\u044f \u0432\u044b\u0434\u0432\u0438\u0433\u0430\u044e\u0449\u0430\u044f\u0441\u044f \u043f\u0430\u043d\u0435\u043b\u044c \u043c\u0435\u043d\u044e, popup \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0441\u0442\u0440\u043e\u043a\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u0438 \u0442.\u0434. <br \/>  \u0415\u0433\u043e \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0432\u043e\u0442:<br \/>  <a href=\"https:\/\/github.com\/philipshurpik\/Framework7-Contacts7-MVC\">https:\/\/github.com\/philipshurpik\/Framework7-Contacts7-MVC<\/a><br \/>  \u0410 \u0432\u043e\u0442 \u0438 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u044b (\u0441 \u043a\u043e\u0442\u0438\u043a\u0430\u043c\u0438):<br \/>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/ee2\/f1b\/84f\/ee2f1b84ff2046c0b4291078307c594e.png\"\/><\/p>\n<p>  \u041d\u0430\u0434\u0435\u044e\u0441\u044c \u044d\u0442\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043e\u043a\u0430\u0436\u0443\u0442\u0441\u044f \u0432\u0430\u043c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c\u0438. <br \/>  \u042f \u0441\u0430\u043c \u0443\u0447\u0438\u043b\u0441\u044f \u043d\u0430 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438 \u0440\u0435\u0448\u0438\u043b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e.<\/p>\n<p>  \u0411\u0443\u0434\u0443 \u0440\u0430\u0434 \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441\u044b.<\/p>\n<p>  \u041f.\u0421. \u0410\u0432\u0442\u043e\u0440\u0430 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u043d\u0430 \u0445\u0430\u0431\u0440\u0435 \u043f\u043e\u043a\u0430 \u043d\u0435\u0442\u0443, \u043d\u043e \u0435\u0441\u043b\u0438 \u0445\u0430\u0431\u0440\u043e\u0432\u0447\u0430\u043d \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u044d\u0442\u0430 \u0442\u0435\u043c\u0430 \u2014 \u044f \u0434\u0443\u043c\u0430\u044e \u043e\u043d \u0442\u043e\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0434 \u043f\u0440\u0438\u043d\u044f\u0442\u044c \u0438\u043d\u0432\u0430\u0439\u0442 \u0438 \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u044c\u0441\u044f \u043a \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u044e. \t\t\t<\/p>\n<div class=\"clear\"><\/div>\n<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/227853\/\"> http:\/\/habrahabr.ru\/post\/227853\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\"> \t\t\t<img decoding=\"async\" src=\"http:\/\/habrastorage.org\/getpro\/habr\/post_images\/f25\/4b7\/0bf\/f254b70bff6f5854118acf5974c58f1f.png\" align=\"left\"\/>\u041d\u0435\u0434\u0430\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u043e \u043c\u043d\u043e\u0439 \u0441\u0442\u0430\u043b\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 IPhone \u0438 Android \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u043f\u044b\u0442\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u0434 IOS \u0443 \u043c\u0435\u043d\u044f \u0440\u0430\u043d\u0435\u0435 \u043d\u0435 \u0431\u044b\u043b\u043e, \u0434\u0430 \u0438 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043d\u0430 \u043e\u0431\u0435\u0438\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u0445. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0431\u044b\u043b \u0432\u044b\u0431\u0440\u0430\u043d \u0431\u044b\u043b \u0432\u044b\u0431\u0440\u0430\u043d Javascript \u0438 PhoneGap.<\/p>\n<p>  \u0418 \u0435\u0441\u043b\u0438 \u0441 \u044f\u0437\u044b\u043a\u043e\u043c \u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e, \u0442\u043e \u0434\u0430\u043b\u0435\u0435 \u0431\u044b\u043b\u043e \u043c\u043d\u043e\u0433\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432.<br \/>   \u0425\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0447\u0442\u043e \u0431\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u043b\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 IOS7 \u0438 \u0431\u044b\u043b\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 native \u043f\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u044b. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043d\u0435 \u0431\u044b\u043b\u043e \u0436\u0435\u043b\u0430\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u00ab\u043c\u043e\u043d\u0441\u0442\u0440\u043e\u0432\u00bb, \u043d\u0430 \u043f\u043e\u0434\u043e\u0431\u0438\u0438 dojo \u0438\u043b\u0438 jquery mobile. c \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0443\u0434\u043e\u0431\u043d\u0443\u044e \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u0443\u044e MVC \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u0412 \u0438\u0442\u043e\u0433\u0435 \u0432 \u0444\u0438\u043d\u0430\u043b \u043c\u043e\u0435\u0433\u043e \u043b\u0438\u0447\u043d\u043e\u0433\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0432\u044b\u0448\u043b\u0438:<br \/>   \u2014 <b>Ionic framework:<\/b> <a href=\"http:\/\/ionicframework.com\/\">http:\/\/ionicframework.com\/<\/a> <br \/>   \u2014 <b>Framework7:<\/b> <a href=\"http:\/\/www.idangero.us\/framework7\/\">http:\/\/www.idangero.us\/framework7\/<\/a>   <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-227853","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/227853","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=227853"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/227853\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=227853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=227853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=227853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}