{"id":185316,"date":"2013-07-02T17:38:05","date_gmt":"2013-07-02T13:38:05","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=185316"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=185316","title":{"rendered":"<span class=\"post_title\">\u041c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 HTML5: \u043e\u0448\u0438\u0431\u043a\u0430 \u0438\u043b\u0438 \u0443\u0441\u043f\u0435\u0445. \u041f\u043e\u043f\u044b\u0442\u043a\u0430 \u21160<\/span>"},"content":{"rendered":"<div class=\"content html_format\">   \t\u0417\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442, \u0447\u0438\u0442\u0430\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u0438 \u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432 \u043c\u0438\u0440\u0435 Web \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0443 \u043c\u0435\u043d\u044f \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u0440\u043e\u0437\u043e\u0432\u0430\u044f \u043c\u0435\u0447\u0442\u0430: \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u2014 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u0435\u0437\u0434\u0435 \u0438 \u0432\u0441\u0435\u0433\u0434\u0430. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043e\u0442\u0437\u044b\u0432\u044b \u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 HTML5 ( <a href=\"http:\/\/habrahabr.ru\/post\/151337\/\">\u0442\u0443\u0442 <\/a>\u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u043d\u0430 \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/company\/devexpress\/blog\/182134\/\">1<\/a> \u0438 <a href=\"http:\/\/habrahabr.ru\/post\/183458\/\">2<\/a> ). \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0434\u043e\u0432\u043e\u0434\u044b \u0431\u0430\u0441\u0442\u0443\u044e\u0449\u0438\u0445: \u043d\u0435\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u0440\u043e\u0434\u043d\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0443, \u0433\u043b\u044e\u0447\u043d\u043e\u0441\u0442\u044c \u0438 \u0442\u043e\u0440\u043c\u043e\u0437\u043d\u0443\u0442\u043e\u0441\u0442\u044c, \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0442\u0434 \u0438 \u0442\u043f. \u041d\u0438 \u0432 \u043a\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435 \u0445\u043e\u0447\u0443 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u044b\u0435 \u0445\u043e\u043b\u0438 \u0432\u0430\u0440\u044b \u043d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443. \u041d\u043e \u043c\u0435\u0447\u0442\u0430 \u0436\u0438\u0432\u0435\u0442 \u0438 \u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044c \u0438\u043b\u0438 \u043e\u0442\u0432\u0435\u0440\u0433\u043d\u0443\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u043d\u0430\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u044f \u043d\u0430 \u0433\u0440\u0430\u0431\u043b\u0438. <br \/>  \u0418\u0442\u0430\u043a, \u0446\u0435\u043b\u044c \u2013 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430 HTML5 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u0430 \u0437\u0430\u043a\u0430\u0437\u043e\u0432 \u0442\u043e\u0440\u0433\u043e\u0432\u044b\u043c \u0430\u0433\u0435\u043d\u0442\u043e\u043c \u0432 \u0442\u043e\u0440\u0433\u043e\u0432\u044b\u0445 \u0442\u043e\u0447\u043a\u0430\u0445. \u042f \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043b\u0441\u044f \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u043d\u0430\u043a\u043e\u043c \u0441 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e, \u0438 \u044d\u0442\u0430 \u0442\u0435\u043c\u0430 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043c\u0435\u0447\u0442\u044b.<br \/>  <a name=\"habracut\"><\/a><br \/>  \u041a \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c \u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u0438\u0437 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430:   <\/p>\n<ul>\n<li>\u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430 \u043c\u043d\u043e\u0433\u0438\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0438 \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u0445. \u041e\u0431\u044b\u0447\u043d\u043e \u0443 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u0445, \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043f\u0430\u0440\u043a \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438-\u0434\u0438\u0441\u0442\u0440\u0438\u0431\u044c\u044e\u0442\u043e\u0440\u044b \u0434\u0430\u0436\u0435 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u044b (\u0442\u0430\u043a \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0434\u043e\u0431\u0440\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 <a href=\"http:\/\/en.wikipedia.org\/wiki\/Bring_your_own_device\">BYOD<\/a>).<\/li>\n<li>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043e\u0444\u043b\u0430\u0439\u043d \u0440\u0430\u0431\u043e\u0442\u044b. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u0435 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0436\u0435\u043b\u0430\u0442\u044c \u043b\u0443\u0447\u0448\u0435\u0433\u043e. \u041d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0445\u043e\u0440\u043e\u0448\u043e \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441 \u0434\u0430\u043d\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439. <\/li>\n<li>\u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043b\u0435\u0433\u043a\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c\u0441\u044f. \u041f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e \u0443 \u043f\u043e\u0441\u0442\u0430\u0432\u0449\u0438\u043a\u043e\u0432 \u0442\u0430\u043a\u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0435\u0440\u0441\u0438\u0439<\/li>\n<li>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0436\u0435\u043b\u0435\u0437\u0430 ( \u043a\u0430\u043c\u0435\u0440\u0430, GPS). <\/li>\n<\/ul>\n<p>  <i>\u041c\u0430\u043b\u0435\u043d\u044c\u043a\u0430\u044f \u0437\u0430\u043c\u0435\u0442\u043a\u0430: <\/i>\u0421\u0442\u0430\u0442\u044c\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u0441 \u0446\u0435\u043b\u044c\u044e \u0437\u0430\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0439\u0434\u0435\u043d\u043d\u043e\u0433\u043e \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430 \u043f\u043e \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044e \u043d\u043e\u0432\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438. \u0412 \u0441\u0432\u044f\u0437\u0438 \u0441 \u043f\u043e\u043b\u043d\u044b\u043c \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435\u043c \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0442\u0430\u043a\u043e\u0433\u043e \u0440\u043e\u0434\u0430, \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u0440\u043e\u0448\u0443 \u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u0437\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u043e\u0433\u0440\u0435\u0445\u0438.<\/p>\n<h5>\u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430:<\/h5>\n<p>  <b>Backend <\/b> \u2014 .net MVC with OData. \u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e \u043d\u0435 \u0432\u0430\u0436\u043d\u043e, \u0447\u0442\u043e \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u044d\u0442\u043e\u0439 \u0440\u043e\u043b\u0438, \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u043e \u043d\u043e\u0432\u044b\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430\u043c WEB API. <b>Frontend <\/b>\u2013 \u0442\u0443\u0442 \u0432\u0441\u0435 \u0441\u043b\u043e\u0436\u043d\u043e \u0434\u043b\u044f \u043c\u0435\u043d\u044f. \u041f\u0440\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 \u043e\u043f\u044b\u0442\u0430 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u043e. \u041f\u043e\u0441\u043b\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043d\u0438\u044f \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0441\u044f \u043d\u0430 <a href=\"http:\/\/habrahabr.ru\/company\/devexpress\/blog\/182134\/\">PhoneJS<\/a>. \u041c\u0435\u043d\u044f \u043f\u043e\u0434\u043a\u0443\u043f\u0438\u043b\u043e \u0442\u043e, \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f SPA \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u0447\u0442\u043e \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0432 \u043a\u0443\u0447\u0443, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 knockoutjs. \u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0440\u0435\u0448\u0438\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c breeze. \u0423\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u0441\u043f\u0438\u0441\u043e\u043a \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0412\u0441\u0435 \u044d\u0442\u043e \u043f\u043e\u0442\u043e\u043c \u0437\u0430\u043f\u0430\u043a\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 PhoneGap \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<br \/>  \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u043c \u0447\u0442\u043e-\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u043e\u0435 \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430: \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0434\u0430\u043d\u043d\u044b\u0445 \u0442\u043e\u0440\u0433\u043e\u0432\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u043c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0435 \u0442\u043e\u0440\u0433\u043e\u0432\u043e\u0433\u043e \u0430\u0433\u0435\u043d\u0442\u0430.<\/p>\n<h5>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/h5>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 <b> ASP.NET MVC 4 Web Application<\/b> \u0438 \u043d\u0430\u0437\u043e\u0432\u0435\u043c \u00ab<b>MSales<\/b>\u00bb. \u0412 \u0434\u0438\u0430\u043b\u043e\u0433\u0435<b> New ASP.NET MVC 4 Project <\/b>\u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d <b>Web API<\/b>.<br \/>  \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043f\u0430\u043a\u0435\u0442\u044b:<code> Update-Package knockoutjs \u0438 Update-Package jQuery<\/code>, \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c: <code>Install-Package Breeze.WebApi \u0438 Install-Package datajs<\/code>.<br \/>  \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0434\u043b\u044f PhoneJS \u043d\u0435\u0442 \u043f\u0430\u043a\u0435\u0442\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0443\u0447\u043a\u0430\u043c\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c <a href=\"http:\/\/go.devexpress.com\/DevExpressDownload_PhoneJS.aspx\">\u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435<\/a> css \u0438 js \u0432 \u043f\u0440\u043e\u0435\u043a\u0442. \u041d\u0430 \u0432\u044b\u0431\u043e\u0440 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u0442\u043e \u0442\u0438\u043f\u043e\u0432 layout, \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b <b>NavbarLayout<\/b>, \u043f\u043e\u043c\u0435\u043d\u044f\u0432 \u0444\u0430\u0439\u043b <b>_Layout.cshtml<\/b>:  <\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;     &lt;meta charset=&quot;utf-8&quot; \/&gt;     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot; \/&gt;     &lt;title&gt;@ViewBag.Title&lt;\/title&gt;     @Styles.Render(&quot;~\/Content\/css&quot;)     @Styles.Render(&quot;~\/Content\/dx&quot;)     @Styles.Render(&quot;~\/Content\/layouts&quot;)     @Scripts.Render(&quot;~\/bundles\/modernizr&quot;) &lt;\/head&gt; &lt;body&gt;     @Html.Partial(&quot;NavbarLayout&quot;)     @RenderBody()      @Scripts.Render(&quot;~\/bundles\/jquery&quot;)     @RenderSection(&quot;scripts&quot;, required: false) &lt;\/body&gt; &lt;\/html&gt; <\/code><\/pre>\n<p>   \u0412 \u0444\u0430\u0439\u043b\u0435 BundleConfig \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0432\u0435\u0441\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u044b. \u0423 \u043c\u0435\u043d\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0432\u043e\u0442 \u0442\u0430\u043a:  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">BundleConfig<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"cs\">\/\/ \u0421\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043e \u0434\u043b\u044f \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f             bundles.Add(new ScriptBundle(&quot;~\/bundles\/knockout&quot;).Include(            &quot;~\/Scripts\/knockout-{version}.js&quot;));               bundles.Add(new ScriptBundle(&quot;~\/bundles\/breeze&quot;).Include(            &quot;~\/Scripts\/q.js&quot;,            &quot;~\/Scripts\/datajs-{version}.js&quot;,            &quot;~\/Scripts\/breeze.debug.js&quot;            ));             bundles.Add(new ScriptBundle(&quot;~\/bundles\/dx&quot;).Include(                        &quot;~\/Scripts\/dx.phonejs.js&quot;,                        &quot;~\/Scripts\/globalize&quot;                        ));              bundles.Add(new ScriptBundle(&quot;~\/bundles\/app&quot;).Include(                        &quot;~\/Scripts\/App\/app.init.js&quot;,                        &quot;~\/Scripts\/App\/app.viewmodel.js&quot;,                        &quot;~\/Scripts\/App\/NavbarLayout.js&quot;                        ));              bundles.Add(new StyleBundle(&quot;~\/Content\/dx&quot;).Include(&quot;~\/Content\/dx\/dx.*&quot;));             bundles.Add(new StyleBundle(&quot;~\/Content\/layouts&quot;).Include(&quot;~\/Content\/layouts\/NavbarLayout.css&quot;)); <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<h5>\u041c\u043e\u0434\u0435\u043b\u044c \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u0440\u044b<\/h5>\n<p>  \u0412 \u043c\u043e\u0434\u0435\u043b\u044c \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u043a\u043b\u044e\u0447\u0438\u043c \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430: \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432 (\u043f\u043e \u044d\u0442\u0438\u043c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430\u043c \u0445\u043e\u0434\u0438\u0442 \u0442\u043e\u0440\u0433\u043e\u0432\u044b\u0439 \u0430\u0433\u0435\u043d\u0442) \u0438 \u0442\u043e\u0440\u0433\u043e\u0432\u044b\u0445 \u0442\u043e\u0447\u0435\u043a (\u043c\u0430\u0433\u0430\u0437\u0438\u043d\u043e\u0432):  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041c\u043e\u0434\u0435\u043b\u044c<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"cs\">public class Route     {         public int RouteID { get; set; }         [Required]         [StringLength(30)]         public string RouteName { get; set; }      }    public class Customer     {         public int CustomerID { get; set; }         [Required]         [StringLength(50)]         public string CustomerName { get; set; }         [StringLength(150)]         public string Address { get; set; }         public string Comment { get; set; }         [ForeignKey(&quot;Route&quot;)]         public int RouteID { get; set; }         virtual public Route Route { get; set; }     } <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b \u0431\u0443\u0434\u0443\u0442 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u0435 (\u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e OData \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"http:\/\/habrahabr.ru\/post\/180375\/\">\u0442\u0443\u0442 <\/a>):  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"cs\">public class RoutesController : EntitySetController&lt;Route, int&gt;     {         private MSalesContext db = new MSalesContext();         public override IQueryable&lt;Route&gt; Get()         {              return db.Routes; ;         }          protected override void Dispose(bool disposing)         {             db.Dispose();             base.Dispose(disposing);         }     }     public class CustomersController : EntitySetController&lt;Customer, int&gt;      {         private MSalesContext db = new MSalesContext();         public override IQueryable&lt;Customer&gt; Get()         {              return db.Customers; ;         }         protected override Customer GetEntityByKey(int key)         {             return db.Customers.FirstOrDefault(p =&gt; p.CustomerID == key);         }           protected override void Dispose(bool disposing)         {             db.Dispose();             base.Dispose(disposing);         }      } <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0448\u0442\u0440\u0438\u0445 \u0432 \u0444\u0430\u0439\u043b\u0435 WebApiConfig:<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"cs\">public static class WebApiConfig     {         public static void Register(HttpConfiguration config)         {              config.Routes.MapODataRoute(&quot;odata&quot;, &quot;odata&quot;, GetEdmModel());             config.Routes.MapHttpRoute(                 name: &quot;DefaultApi&quot;,                 routeTemplate: &quot;api\/{controller}\/{id}&quot;,                 defaults: new { id = RouteParameter.Optional }             );              config.EnableQuerySupport();              config.EnableSystemDiagnosticsTracing();         }         public static IEdmModel GetEdmModel()         {             ODataModelBuilder builder = new ODataConventionModelBuilder();             builder.EntitySet&lt;Route&gt;(&quot;Routes&quot;);             builder.EntitySet&lt;Customer&gt;(&quot;Customers&quot;);             builder.Namespace = &quot;MSales.Models&quot;;             return builder.GetEdmModel();         }     } <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u041f\u0440\u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \u0434\u043b\u044f \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u0430 OData \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443 <code>builder.Namespace = &quot;MSales.Models&quot;;<\/code>, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a breeze \u0438 datajs.<\/p>\n<h5>Frontend.<\/h5>\n<p>  \u0412 \u043f\u0430\u043f\u043a\u0435 <b>Scripts\/app<\/b> \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b \u0441\u043a\u0440\u0438\u043f\u0442\u0430 <b>app.init.js<\/b> \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a:  <\/p>\n<pre><code class=\"javascript\">window.MyApp = {};   $(function () {     MyApp.app = new DevExpress.framework.html.HtmlApplication({         namespace: MyApp,          defaultLayout: &quot;navbar&quot;,         navigation: [           {               title: &quot;Routes&quot;,               action: &quot;#route&quot;,               icon: &quot;home&quot;           },           {               title: &quot;About&quot;,               action: &quot;#about&quot;,               icon: &quot;info&quot;           }         ]     });     MyApp.app.router.register(&quot;:view\/:id&quot;, { view: &quot;route&quot;, id: 0 });     MyApp.app.navigate();     var serverAddress = &quot;\/odata\/&quot;;     breeze.config.initializeAdapterInstances({ dataService: &quot;OData&quot; });     MyApp.manager = new breeze.EntityManager(serverAddress); }); <\/code><\/pre>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0435\u043c HTML \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c layout \u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u043f\u0443\u043d\u043a\u0442\u043e\u0432: \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b \u0438 about; \u0430 \u0442\u0430\u043a\u0436\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 breeze.<br \/>  \u0412 \u0444\u0430\u0439\u043b\u0435<b> Index.cshtml<\/b> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c dxView \u0438 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0441 \u0438\u043c\u0435\u043d\u0435\u043c \u201ccontent\u201d, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a:   <\/p>\n<pre><code class=\"html\">&lt;div data-options=&quot;dxView : { name: 'route', title: 'Routes' } &quot; &gt;   &lt;div class=&quot;route-view&quot;  data-options=&quot;dxContent : { targetPlaceholder: 'content' } &quot; &gt;     &lt;div data-bind=&quot;dxList: { dataSource: dataSource }&quot;&gt;      &lt;div data-options=&quot;dxTemplate : { name: 'item' }&quot;  data-bind=&quot;text: RouteName, dxAction: '#customers\/{RouteID}'&quot;\/&gt;     &lt;\/div&gt;   &lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u0438 \u043f\u0430\u0440\u0443 \u0441\u0442\u0440\u043e\u043a \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e, \u0441\u043e\u0437\u0434\u0430\u0442\u044c Viewmodel, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043f\u0430\u043f\u043a\u0435 <b>Scripts\/app<\/b> \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b<b> app.viewmodel.js<\/b>:  <\/p>\n<pre><code class=\"javascript\">MyApp.route = function (params) { \tvar viewModel = { \t\tdataSource: { \t\t\tload: function (loadOptions) { \t\t\t\tif (loadOptions.refresh) { \t\t\t\t    var deferred = new $.Deferred(); \t\t\t\t    var query = breeze.EntityQuery.from(&quot;Routes&quot;).orderBy(&quot;RouteID&quot;); \t\t\t\t    MyApp.manager.executeQuery(query, function (result) { \t\t\t\t        deferred.resolve(result.results); \t\t\t\t\t  }); \t\t\t\t\treturn deferred; \t\t\t\t} \t\t\t} \t\t} \t} \treturn viewModel; };  <\/code><\/pre>\n<p>  \u0425\u043e\u0447\u0443 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0447\u0442\u043e \u0438\u043c\u044f Viewmodel \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c dxView, \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u044a\u0435\u043a\u0442 dataSource, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043e\u0434\u0438\u043d \u043c\u0435\u0442\u043e\u0434 load \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445. \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 refresh \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0434\u043e\u043b\u0436\u043d\u044b \u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e. \u0412 \u043c\u0435\u0442\u043e\u0434\u0435 \u0441\u0442\u0440\u043e\u0438\u043c \u0437\u0430\u043f\u0440\u043e\u0441, \u0441\u043e\u0440\u0442\u0438\u0440\u0443\u044f \u043f\u043e \u043f\u043e\u043b\u044e RouteID \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0435\u0433\u043e. <br \/>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0435 \u043e\u0434\u043d\u0443 View \u2013 <b>About<\/b>:  <\/p>\n<pre><code class=\"html\">    &lt;div data-options=&quot;dxView : { name: 'about', title: 'About' } &quot;&gt;         &lt;div data-options=&quot;dxContent : { targetPlaceholder: 'content' } &quot;&gt;             &lt;div data-bind=&quot;dxScrollView: {}&quot;&gt;                 &lt;p style=&quot;padding: 5px&quot;&gt;This is my first SPA application.&lt;\/p&gt;             &lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0434\u043b\u044f IPhone:<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/e8d\/8e8\/0a4\/e8d8e80a4b531821f994c82a6774f33a.png\" alt=\"image\"\/><br \/>  \u0412\u044b, \u043d\u0430\u0432\u0435\u0440\u043d\u043e, \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0438 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e\u0432\u0435\u0448\u0435\u043d\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>dxAction: '#customers\/{RouteID}'<\/code>, \u0433\u0434\u0435, \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438,<code> '#customers<\/code> \u2013 \u044d\u0442\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u0435 View, \u0430 <code>RouteID <\/code>\u2013 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0439 \u0432 \u044d\u0442\u043e View:  <\/p>\n<pre><code class=\"html\">&lt;div data-options=&quot;dxView : { name: 'customers', title: 'Customers' } &quot; &gt; &lt;div data-bind=&quot;dxCommand: { title: 'Search', placeholder: 'Search...', location: 'create', icon: 'find', action: find }&quot; &gt;&lt;\/div&gt;   &lt;div data-options=&quot;dxContent : { targetPlaceholder: 'content' } &quot; &gt;       &lt;div data-bind=&quot;dxTextbox: { mode: 'search', value: searchString, visible: showSearch, valueUpdateEvent: 'search change keyup' }&quot;&gt;&lt;\/div&gt;     &lt;div data-bind=&quot;dxList: { dataSource: dataSource }&quot;&gt;       &lt;div data-options=&quot;dxTemplate : { name: 'item' } &quot; data-bind=&quot;text: name, dxAction: '#customer-details\/{id}'&quot;\/&gt;     &lt;\/div&gt;   &lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0412 \u0441\u0432\u044f\u0437\u0438 \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043f\u043e\u043a\u0443\u043f\u0430\u0442\u0435\u043b\u0435\u0439 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043c\u043d\u043e\u0433\u043e, \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0438\u0441\u043a\u0430: \u0434\u043e\u0431\u0430\u0432\u0438\u043b <b>dxCommand <\/b> \u2014 \u043a\u043d\u043e\u043f\u043a\u0430 \u043f\u043e\u0438\u0441\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <b>find<\/b>, \u0438 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u043f\u0435\u0440\u0435\u0434 \u0441\u043f\u0438\u0441\u043a\u043e\u043c.<br \/>  Viewmodel:  <\/p>\n<pre><code class=\"javascript\">MyApp.customers = function (params) { \tvar skip = 0; \tvar PAGE_SIZE = 10; \tvar viewModel = { \t\trouteId: params.id, \t\tsearchString: ko.observable(''), \t\tshowSearch: ko.observable(false), \t\tfind: function () { \t\t\tviewModel.showSearch(!viewModel.showSearch()); \t\t\tviewModel.searchString(''); \t\t}, \t\tdataSource: { \t\t\tchanged: new $.Callbacks(), \t\t\tload: function (loadOptions) { \t\t\t\tif (loadOptions.refresh) { \t\t\t\t\tskip = 0; \t\t\t\t} \t\t\t\tvar deferred = new $.Deferred(); \t\t\t\tvar query = breeze.EntityQuery.from(&quot;Customers&quot;)                     .where(&quot;CustomerName&quot;, &quot;substringof&quot;, viewModel.searchString())                     .where(&quot;RouteID&quot;, &quot;eq&quot;, viewModel.routeId)                     .skip(skip)                     .take(PAGE_SIZE)                     .orderBy(&quot;CustomerID&quot;); \t\t\t\tMyApp.manager.executeQuery(query, function (result) { \t\t\t\t    skip += PAGE_SIZE; \t\t\t\t    console.log(result); \t\t\t\t    var mapped = $.map(result.results, function (data) {  \t\t\t\t        return { \t\t\t\t            name: data.CustomerName, \t\t\t\t            id: data.CustomerID \t\t\t\t        } \t\t\t\t    }); \t\t\t\t  \tdeferred.resolve(mapped); \t\t\t\t  }); \t\t\t\treturn deferred; \t\t\t} \t\t} \t}; \tko.computed(function () { \t\treturn viewModel.searchString(); \t}).extend({ \t\tthrottle: 500 \t}).subscribe(function () { \t\tviewModel.dataSource.changed.fire(); \t}); \treturn viewModel; }; <\/code><\/pre>\n<p>  \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 <b>skip <\/b>\u0438 <b>PAGE_SIZE <\/b>\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0447\u0430\u0441\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 (\u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 10 \u0437\u0430\u043f\u0438\u0441\u0435\u0439), \u0430 \u0434\u043e\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u0434\u0442\u0438 \u043f\u043e \u043c\u0435\u0440\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<br \/>  \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 <b>searchString <\/b>\u0438 <b>showSearch <\/b>\u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430, \u043f\u0440\u0438 \u0447\u0435\u043c \u043f\u043e\u0438\u0441\u043a \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0441 \u043f\u043e\u043b \u0441\u0435\u043a\u0443\u043d\u0434\u043d\u043e\u0439 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u043f\u043e\u0441\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u0441\u0438\u043c\u0432\u043e\u043b\u0430.<br \/>  \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/0eb\/b7f\/f35\/0ebb7ff3532e108b8cc7e4a7dbed5fb2.png\" alt=\"image\"\/><br \/>  \u041d\u0443 \u0438 \u043d\u0430\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u043a, \u0432\u044b\u0432\u0435\u0434\u0435\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u043c \u043f\u043e\u043a\u0443\u043f\u0430\u0442\u0435\u043b\u0435:<br \/>  View:  <\/p>\n<pre><code class=\"html\">&lt;div data-options=&quot;dxView : { name: 'customer-details', title: 'Product' } &quot; &gt;    &lt;div data-options=&quot;dxContent : { targetPlaceholder: 'content' } &quot; &gt;     &lt;div class=&quot;dx-fieldset&quot;&gt;       &lt;div class=&quot;dx-field&quot;&gt;         &lt;div class=&quot;dx-field-label&quot;&gt;Id: &lt;\/div&gt;         &lt;div class=&quot;dx-field-value&quot; data-bind=&quot;text: id&quot;&gt;&lt;\/div&gt;       &lt;\/div&gt;       &lt;div class=&quot;dx-field&quot;&gt;         &lt;div class=&quot;dx-field-label&quot;&gt;Name: &lt;\/div&gt;         &lt;div class=&quot;dx-field-value&quot; data-bind=&quot;text: name&quot;&gt;&lt;\/div&gt;       &lt;\/div&gt;       &lt;div class=&quot;dx-field&quot;&gt;         &lt;div class=&quot;dx-field-label&quot;&gt;Address: &lt;\/div&gt;         &lt;div class=&quot;dx-field-value&quot; data-bind=&quot;text: address&quot;&gt;&lt;\/div&gt;       &lt;\/div&gt;       &lt;div class=&quot;dx-field&quot;&gt;         &lt;div class=&quot;dx-field-label&quot;&gt;Comment: &lt;\/div&gt;         &lt;div class=&quot;dx-field-value&quot; data-bind=&quot;text: comment&quot;&gt;&lt;\/div&gt;       &lt;\/div&gt;     &lt;\/div&gt;   &lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  ViewModel:  <\/p>\n<pre><code class=\"javascript\">MyApp['customer-details'] = function (params) { \tvar viewModel = { \t\tid: parseInt(params.id), \t\tname: ko.observable(''), \t\taddress: ko.observable(''),         comment:ko.observable('') \t}; \tvar data = MyApp.manager.getEntityByKey(&quot;Customer&quot;, viewModel.id); \tconsole.log(data); \tviewModel.name(data.CustomerName()); \tviewModel.address(data.Address()); \tviewModel.comment(data.Comment());  \t \treturn viewModel; }; <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/384\/1b2\/cc6\/3841b2cc6e28084c8088b0537d5f85af.png\" alt=\"image\"\/><br \/>  <i>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u044b \u0441\u0434\u0435\u043b\u0430\u043d\u044b \u0441 \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u0430 Ripple Emulator (Beta).<\/i><\/p>\n<h5>\u0420\u0435\u0437\u044e\u043c\u0435.<\/h5>\n<p>  \u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0435 SPA \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0441 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0435\u0439 \u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445. \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u043b\u043e\u0436\u043d\u043e \u0441\u0443\u0434\u0438\u0442\u044c \u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\/\u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438\/ \u0438 \u0442.\u0434. \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0438 \u0432\u044b\u043b\u043e\u0436\u0443 \u043d\u0430 Azure, \u0447\u0442\u043e \u0431\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u0436\u0435\u043b\u0430\u044e\u0449\u0438\u0439 \u0441\u043c\u043e\u0433 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c.    \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\/185316\/\"> http:\/\/habrahabr.ru\/post\/185316\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">   \t\u0417\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442, \u0447\u0438\u0442\u0430\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u0438 \u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432 \u043c\u0438\u0440\u0435 Web \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0443 \u043c\u0435\u043d\u044f \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u0440\u043e\u0437\u043e\u0432\u0430\u044f \u043c\u0435\u0447\u0442\u0430: \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u2014 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u0435\u0437\u0434\u0435 \u0438 \u0432\u0441\u0435\u0433\u0434\u0430. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043e\u0442\u0437\u044b\u0432\u044b \u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 HTML5 ( <a href=\"http:\/\/habrahabr.ru\/post\/151337\/\">\u0442\u0443\u0442 <\/a>\u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u043d\u0430 \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/company\/devexpress\/blog\/182134\/\">1<\/a> \u0438 <a href=\"http:\/\/habrahabr.ru\/post\/183458\/\">2<\/a> ). \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0434\u043e\u0432\u043e\u0434\u044b \u0431\u0430\u0441\u0442\u0443\u044e\u0449\u0438\u0445: \u043d\u0435\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u0440\u043e\u0434\u043d\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0443, \u0433\u043b\u044e\u0447\u043d\u043e\u0441\u0442\u044c \u0438 \u0442\u043e\u0440\u043c\u043e\u0437\u043d\u0443\u0442\u043e\u0441\u0442\u044c, \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0442\u0434 \u0438 \u0442\u043f. \u041d\u0438 \u0432 \u043a\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435 \u0445\u043e\u0447\u0443 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u044b\u0435 \u0445\u043e\u043b\u0438 \u0432\u0430\u0440\u044b \u043d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443. \u041d\u043e \u043c\u0435\u0447\u0442\u0430 \u0436\u0438\u0432\u0435\u0442 \u0438 \u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044c \u0438\u043b\u0438 \u043e\u0442\u0432\u0435\u0440\u0433\u043d\u0443\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u043d\u0430\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u044f \u043d\u0430 \u0433\u0440\u0430\u0431\u043b\u0438. <br \/>  \u0418\u0442\u0430\u043a, \u0446\u0435\u043b\u044c \u2013 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430 HTML5 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u0430 \u0437\u0430\u043a\u0430\u0437\u043e\u0432 \u0442\u043e\u0440\u0433\u043e\u0432\u044b\u043c \u0430\u0433\u0435\u043d\u0442\u043e\u043c \u0432 \u0442\u043e\u0440\u0433\u043e\u0432\u044b\u0445 \u0442\u043e\u0447\u043a\u0430\u0445. \u042f \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043b\u0441\u044f \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u043d\u0430\u043a\u043e\u043c \u0441 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e, \u0438 \u044d\u0442\u0430 \u0442\u0435\u043c\u0430 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043c\u0435\u0447\u0442\u044b.  <\/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-185316","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/185316","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=185316"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/185316\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=185316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=185316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=185316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}