{"id":300221,"date":"2020-03-16T15:01:14","date_gmt":"2020-03-16T15:01:14","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=300221"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=300221","title":{"rendered":"\u041f\u0440\u0438\u043c\u0435\u0440 SPA \u00ab\u041f\u0440\u043e\u0441\u0442\u044b\u0435 \u0437\u0430\u043c\u0435\u0442\u043a\u0438\u00bb \u043d\u0430 Mithril.js"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/492496\/\"><a href=\"http:\/\/mithril.js.org\/\">Mithril.js <\/a> \u2014 \u043d\u0435\u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041d\u0430 \u0425\u0430\u0431\u0440\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435\u0442 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0439 \u043f\u043e \u044d\u0442\u043e\u0439 \u0442\u0435\u043c\u0435. \u0412 \u044d\u0442\u043e\u0439 \u0437\u0430\u043c\u0435\u0442\u043a\u0435 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 Mithril. \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e \u043c\u043e\u0442\u0438\u0432\u0430\u043c \u0432\u043e\u0442 \u044d\u0442\u043e\u0439 <a href=\"https:\/\/levelup.gitconnected.com\/building-faster-apps-with-vue-3d9a4302061d\">\u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438<\/a> (<a href=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/487684\/\">\u043f\u0435\u0440\u0435\u0432\u043e\u0434<\/a>)<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h3>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Mihtril<\/h3>\n<p>  Mithril \u2013 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0439 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f SPA (\u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0445 \u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439). \u0412 \u043e\u0431\u0449\u0435\u043c, \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e javascript \u0438 13 \u0441\u0438\u0433\u043d\u0430\u0442\u0443\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 API. \u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e, \u0435\u0441\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 mithril-stream, \u043d\u0435 \u0432\u0445\u043e\u0434\u044f\u0449\u0430\u044f \u0432 mithril \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0430\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e. \u0412 \u044f\u0434\u0440\u043e mithril \u0432\u0445\u043e\u0434\u0438\u0442 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 XHR \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438. \u0426\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u043c \u043f\u043e\u043d\u044f\u0442\u0438\u0435\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u044f \u2014 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0443\u0437\u0435\u043b (vnode). \u0412\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0443\u0437\u0435\u043b \u2013 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e js \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432. \u0412\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0443\u0437\u043b\u044b \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 m(). \u0422\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0443\u0437\u043b\u043e\u0432 (virtual DOM). \u041f\u0440\u0438 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, virtual DOM \u0442\u0440\u0430\u043d\u0441\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 DOM. \u041f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 DOM API, \u043f\u0440\u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u043c\u0438\u0441\u0430 m.request() \u0438 \u043f\u0440\u0438 \u0441\u043c\u0435\u043d\u0435 URL (\u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043f\u043e \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f) \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 virtual DOM, \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043e \u0441\u0442\u0430\u0440\u044b\u043c, \u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0432\u0448\u0438\u0435\u0441\u044f \u0443\u0437\u043b\u044b \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442 DOM \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u041a\u0440\u043e\u043c\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 DOM \u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 m.request(), \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 m.redraw(). <\/p>\n<p>  \u0412 mithril \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u043d\u0435\u0442 HTML \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432, \u043d\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 JSX, \u0445\u043e\u0442\u044f \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u0432\u0441\u0435 \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435. \u042f \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u043f\u0435\u0440\u0432\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c m() \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0430, (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u2018div\u2019), \u0442\u043e\u0433\u0434\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0443\u0437\u0435\u043b \u0438 \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0432 DOM \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u0435\u0434\u0435\u043d HTML \u0442\u044d\u0433 <\/p>\n<pre><code class=\"xml\">&lt;div&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u043f\u0435\u0440\u0432\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c m() \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0430\u044f \u043e\u0431\u044a\u0435\u043a\u0442, \u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043c\u0435\u0442\u044c \u043c\u0435\u0442\u043e\u0434 view(), \u0438 \u0442\u0430\u043a\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c. \u041c\u0435\u0442\u043e\u0434 view() \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e m() (\u0438\u043b\u0438 \u043c\u0430\u0441\u0441\u0438\u0432 \u0442\u0438\u043f\u0430: [ m(), ]). \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0418 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435 \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 vnode \u0443\u0437\u043b\u044b.<\/p>\n<p>  \u0418 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0443\u0437\u043b\u044b, \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u043c\u0435\u0442\u043e\u0434\u044b \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430, \u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u043d\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e oninit(), oncreate(), onbeforeupdate(), \u0438 \u0442.\u0434. \u041a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u044d\u0442\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u043e \u0432\u043f\u043e\u043b\u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  \u0412\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0443\u0437\u043b\u0443 \u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432 \u0432\u0438\u0434\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0432\u0442\u043e\u0440\u043e\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 m(). \u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u044d\u0442\u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u0443\u0437\u043b\u0430 \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u043e\u0442\u0430\u0446\u0438\u0438 vnode.attrs. \u0422\u0440\u0435\u0442\u0438\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 m() \u2013 \u044d\u0442\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u0438 \u044d\u0442\u043e\u0433\u043e \u0443\u0437\u043b\u0430 \u0438 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043d\u0438\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 vnode.children. \u041a\u0440\u043e\u043c\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 m(), \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0443\u0437\u043b\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044f m.trust(). <\/p>\n<p>  \u0410\u0432\u0442\u043e\u0440 mithril \u043d\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043e\u0441\u043e\u0431\u044b\u0445 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u043e\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0445\u043e\u0442\u044f \u0438 \u0441\u043e\u0432\u0435\u0442\u0443\u0435\u0442 \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435\u0443\u0434\u0430\u0447\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u00ab\u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0442\u043e\u043b\u0441\u0442\u044b\u0445\u00bb \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u043b\u0438 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0435\u0439 \u043f\u043e\u0442\u043e\u043c\u043a\u0430\u043c\u0438 \u0434\u0435\u0440\u0435\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0410\u0432\u0442\u043e\u0440 \u0442\u0430\u043a\u0436\u0435 \u043d\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043e\u0441\u043e\u0431\u044b\u0445 \u043f\u0443\u0442\u0435\u0439 \u0438\u043b\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0446\u0435\u043b\u043e\u043c \u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0425\u043e\u0442\u044f \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0443\u0442\u043e\u0447\u043d\u044f\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043d\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u0430\u043c\u043e\u0433\u043e \u0443\u0437\u043b\u0430, \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043c. <\/p>\n<p>  \u0412\u0441\u0435 \u044d\u0442\u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 mithril \u043a\u0430\u0436\u0443\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u044b\u043c\u0438, \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u0434\u043e\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u043c, \u043d\u0435\u0442 \u043e\u0441\u043e\u0431\u044b\u0445 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0439, \u043d\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\/\u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430, \u043d\u0435\u0442 \u0440\u0435\u0434\u0443\u043a\u0442\u043e\u0440\u0430\/\u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043d\u0435\u0442 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432. \u0412 \u043e\u0431\u0449\u0435\u043c, \u0434\u0435\u043b\u0430\u0439\u0442\u0435, \u043a\u0430\u043a \u0443\u043c\u0435\u0435\u0442\u0435.<\/p>\n<h3>\u0427\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 <\/h3>\n<p>  \u0411\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c:<\/p>\n<ul>\n<li><a href=\"http:\/\/mithril.js.org\/\">Mithril.js \u0432\u0435\u0440\u0441\u0438\u0438 2.0.4<\/a><\/li>\n<li>css \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <a href=\"https:\/\/purecss.io\/\">pure.css<\/a> \u0432\u0435\u0440\u0441\u0438\u0438 1.0.1<\/li>\n<li><a href=\"https:\/\/fontawesome.com\/\">fontawesome v5.12<\/a> \u0434\u043b\u044f \u0438\u043a\u043e\u043d\u043e\u043a<\/li>\n<li><a href=\"https:\/\/rollupjs.org\/\">rollup.js<\/a> \u0432\u0435\u0440\u0441\u0438\u0438 1.32 \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/li>\n<li><a href=\"http:\/\/postgrest.org\/en\/v6.0\/releases\/v5.2.0.html\">postgREST<\/a> \u0432\u0435\u0440\u0441\u0438\u0438 5.2.0, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 backend REST \u0441\u0435\u0440\u0432\u0435\u0440\u0430 <\/li>\n<li>postgresql \u0432\u0435\u0440\u0441\u0438\u0438 9.6 \u0438\u043b\u0438 \u0432\u044b\u0448\u0435 \u043a\u0430\u043a \u0431\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445.<\/li>\n<\/ul>\n<p>  \u0424\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0441\u0435\u0440\u0432\u0435\u0440 \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u0432\u0430\u0436\u0435\u043d, \u043e\u043d \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0442\u0434\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0443 index.html \u0438 \u0444\u0430\u0439\u043b\u044b \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0438 \u0441\u0442\u0438\u043b\u0435\u0439. <\/p>\n<p>  \u041d\u0435 \u0431\u0443\u0434\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c mithril \u0432 node_modules, \u0438 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b. \u041a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 mithril \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  \u041f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u0443 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0443, \u0445\u043e\u0442\u044f \u043f\u043e \u043f\u043e\u0432\u043e\u0434\u0443 postgREST \u043c\u043e\u0433\u0443 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u0430\u0447\u0430\u0439\u0442\u0435 \u0431\u0438\u043d\u0430\u0440\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u0435 \u0435\u0433\u043e \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u0430\u043f\u043a\u0443, \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0442\u0430\u043c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b test.conf \u0442\u0438\u043f\u0430 \u0442\u0430\u043a\u043e\u0433\u043e:<\/p>\n<pre><code class=\"plaintext\">db-uri = &quot;postgres:\/\/postgres:user1@localhost:5432\/testbase&quot; server-port= 5000 # The name of which database schema to expose to REST clients db-schema= &quot;public&quot; # The database role to use when no client authentication is provided. # Can (and probably should) differ from user in db-uri db-anon-role = &quot;postgres&quot; <\/code><\/pre>\n<p>  \u041f\u0440\u0438 \u044d\u0442\u043e\u043c, \u0432 \u0432\u0430\u0448\u0435\u043c \u043a\u043b\u0430\u0441\u0442\u0435\u0440\u0435 postgesql \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0431\u0430\u0437\u0430 testbase \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c user1. \u0412 \u044d\u0442\u043e\u0439 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u0435 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u0443:<\/p>\n<pre><code class=\"sql\">-- Postgrest sql notes table  create table if not exists notes ( id serial primary key, title varchar(127) NOT NULL, content text NOT NULL, created timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, completed timestamp with time zone, ddel smallint default 0 )<\/code><\/pre>\n<p>  \u0417\u0430\u043f\u0443\u0441\u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0430 postgREST \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439:<\/p>\n<pre><code class=\"bash\">postgrest test.conf <\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043e\u043d \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043a \u0431\u0430\u0437\u0435, \u0438 \u043d\u0430 \u043a\u0430\u043a\u043e\u043c \u043f\u043e\u0440\u0442\u0443 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432.<\/p>\n<h3>\u041f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442<\/h3>\n<p>  \u0418\u0442\u0430\u043a, \u0435\u0441\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043c\u0438\u0442\u0440\u0438\u043b, \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0442\u044c, \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0412\u043e\u0442 \u043f\u043b\u0430\u043d:<\/p>\n<ol>\n<li>\u0414\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0435, \u043d\u0430\u0437\u043e\u0432\u0435\u043c \u0435\u0433\u043e \u043c\u043e\u0434\u0435\u043b\u044c<\/li>\n<li>API \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435<\/li>\n<li>\u041c\u0430\u0440\u0448\u0440\u0443\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435<\/li>\n<li>\u041c\u0430\u0440\u0448\u0440\u0443\u0442\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u0447\u043a\u043e\u0439 \u0432\u0445\u043e\u0434\u0430 \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/li>\n<li>\u041a\u0430\u0436\u0434\u044b\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 (\u0430 \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u0443\u044e \u0441\u0445\u0435\u043c\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430) \u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043d\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435<\/li>\n<li>\u041a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0434\u0435\u043b\u0438, \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043c\u043e\u0434\u0435\u043b\u0438<\/li>\n<li>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 DOM \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435<\/li>\n<\/ol>\n<p>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 DOM, \u043a\u043e\u043b\u0431\u044d\u043a\u0438 \u043f\u043e \u044d\u0442\u0438\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. \u042f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c two way binding. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0445\u043e\u0434 \u043d\u0435 \u0432\u0441\u0435\u043c \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f, \u043d\u043e \u0438 \u043d\u0435 \u0432\u0441\u0435\u043c \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f redux \u0438\u043b\u0438 vuex. \u0422\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0447\u0442\u043e \u0442\u0435\u0445\u043d\u0438\u043a\u0443 one way binding \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u044f\u0449\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0432 \u043c\u0438\u0442\u0440\u0438\u043b, \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c mithril-sream. \u041d\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435.<\/p>\n<h3>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0430\u043f\u043e\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/yp\/uy\/fa\/ypuyfap4tlxl_ccqo86wbtb9h98.jpeg\"\/><\/p>\n<p>  \u041f\u0430\u043f\u043a\u0430 public \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0444\u0440\u043e\u043d\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c, \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u0444\u0430\u0439\u043b index.html, \u0438 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0438 \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u0430\u043c\u0438.<\/p>\n<p>  \u041f\u0430\u043f\u043a\u0430 src \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u043a\u043e\u0440\u043d\u0435 \u0440\u043e\u0443\u0442\u0435\u0440 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 API, \u0438 \u0434\u0432\u0430 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430, \u0434\u043b\u044f \u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<p>  \u0412 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0435\u0441\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b rollup.config, \u0438 \u0441\u0431\u043e\u0440\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439:<\/p>\n<pre><code class=\"bash\">rollup \u2013c<\/code><\/pre>\n<p>  \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0443\u0442\u043e\u043c\u043b\u044f\u0442\u044c \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f \u0434\u043b\u0438\u043d\u043d\u044b\u043c\u0438 \u043a\u0443\u0441\u043a\u0430\u043c\u0438 \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043d\u0430 <a href=\"https:\/\/github.com\/SLikhachev\/mithril-notes\">github.com,<\/a> \u044f \u043f\u0440\u043e\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u044e \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0434\u0438\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u044b\u0439 \u0434\u043b\u044f \u043c\u0438\u0442\u0440\u0438\u043b \u043f\u043e\u0434\u0445\u043e\u0434. <\/p>\n<h3>API \u0438 router<\/h3>\n<p>  \u041a\u043e\u0434 API:<\/p>\n<pre><code class=\"javascript\">\/\/ used by backend server export const restApi= {   notes: { url: 'notes', editable: ['add', 'edit', 'del'] } }  \/\/ used by routers export const appApi = {   root: &quot;\/&quot;, } \/\/ used by navBar \/\/ here array of arrays though it may be hash eg export const appMenu = [   [`${appApi.root}`, 'Home'],   [`${appApi.root}`, 'About'],   [`${appApi.root}`, 'Contacts'], ]<\/code><\/pre>\n<p>  \u042f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b API \u0434\u043b\u044f REST \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u0434\u043b\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0442\u043e\u0440\u0430.<\/p>\n<p>  \u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0442\u043e\u0440:<\/p>\n<pre><code class=\"javascript\">import { restApi, appApi } from '.\/appApi'; import { moModel } from '.\/model\/moModel'; import { vuView, vuApp } from '.\/view\/vuApp'; import { vuNavBar } from '.\/view\/vuNavBar';  \/\/ application router const appRouter = { [appApi.root]: {   render() {     const view = m(vuApp, {       model: moModel.getModel( restApi.notes ),     });     return vuView( {menu: vuNavBar}, view);   } }};  \/\/ once per app m.route(document.body, &quot;\/&quot;, appRouter);<\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u0440\u043e\u0443\u0442\u0435\u0440 \u043f\u0440\u0438\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u043a \u0442\u0435\u043b\u0443 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u0421\u0430\u043c \u0440\u043e\u0443\u0442\u0435\u0440 \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u043d\u0430 \u044d\u0442\u043e\u043c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0435, \u0444\u0443\u043d\u043a\u0446\u0438\u044f render() \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u0435\u0440\u043d\u0443\u0442\u044c vnode.<\/p>\n<p>  \u041e\u0431\u044a\u0435\u043a\u0442 appApi \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0432\u0441\u0435 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0430 \u043e\u0431\u044a\u0435\u043a\u0442 appMenu \u2014 \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u0424\u0443\u043d\u043a\u0446\u0438\u044f render \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043c\u043e\u0434\u0435\u043b\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0435\u0435 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c\u0443 \u0443\u0437\u043b\u0443.<\/p>\n<h3>\u041c\u043e\u0434\u0435\u043b\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>  \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u0445\u0440\u0430\u043d\u044f\u0449\u0443\u044e \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u044f \u043d\u0430\u0437\u0432\u0430\u043b \u043c\u043e\u0434\u0435\u043b\u044c\u044e. \u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0435\u0439 \u043c\u043e\u0434\u0435\u043b\u044c:<\/p>\n<pre><code class=\"javascript\">getModel(     {url=null, method=&quot;GET&quot;, order_by='id', editable=null} = {}   ) { \/**   * url - string of model's REST API url   * method - string of model's REST method   * order_by - string &quot;order by&quot; with initially SELECT    * editable - array defines is model could changed *\/     const model = {       url: url,       method: method,       order_by: order_by,       editable: editable,       key: order_by, \/\/ here single primary key only       list: null, \/\/ main data list        item: {}, \/\/ note item       error: null, \/\/ Promise error       save: null, \/\/ save status       editMode: false, \/\/ view switch flag       word: '' \/\/ dialog header word     };       model.getItem= id =&gt; {       model.item= {};       if ( !id ) {         model.editMode= true;         return false;       }       const key= model.key;       for ( let it of model.list ) {         if (it[key] == id) {           model.item= Object.assign({}, it);           break;         }       }       return false;     };     return model;   },<\/code><\/pre>\n<p>   \u0417\u0434\u0435\u0441\u044c \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u043c\u043e\u0434\u0435\u043b\u0438. \u0421\u0441\u044b\u043b\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043c\u043e\u0433\u0443\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f, \u043e\u0434\u043d\u0430\u043a\u043e \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0441\u0430\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0439.<\/p>\n<p>  \u041a\u0440\u043e\u043c\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 getModel \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0435 moModel \u0435\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u0434\u043b\u044f \u043c\u0438\u0442\u0440\u0438\u043b-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 m.request(), \u044d\u0442\u043e getList(model), \u0438 formSubmit(event, model, method). \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 model, \u044d\u0442\u043e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442 \u043c\u043e\u0434\u0435\u043b\u0438, event \u2013 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435 \u0444\u043e\u0440\u043c\u044b, method- HTTP method, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0437\u0430\u043c\u0435\u0442\u043a\u0443 (POST- \u043d\u043e\u0432\u0430\u044f \u0437\u0430\u043c\u0435\u0442\u043a\u0430, PATCH, DELETE \u2014 \u0441\u0442\u0430\u0440\u0430\u044f).<\/p>\n<h3>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/h3>\n<p>  \u0412 \u043f\u0430\u043f\u043a\u0435 view \u043b\u0435\u0436\u0430\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0437\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u042f \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b \u0438\u0445 \u043d\u0430 4 \u0447\u0430\u0441\u0442\u0438: <\/p>\n<ul>\n<li>vuApp \u2013 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, <\/li>\n<li>vuNavBar \u2013 \u043f\u0430\u043d\u0435\u043b\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438,<\/li>\n<li>vuNotes \u2013 \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u043c\u0435\u0442\u043e\u043a,<\/li>\n<li>vuNoteForm \u2013 \u0444\u043e\u0440\u043c\u0430 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u0430\u043c\u0435\u0442\u043a\u0438,<\/li>\n<li>vuDialog \u2013 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442 dialog <\/li>\n<\/ul>\n<p>  \u0412 \u0440\u043e\u0443\u0442\u0435\u0440\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e, \u0447\u0442\u043e \u043f\u043e \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c\u0443 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0443 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f vuView( menu, view )<\/p>\n<p>  \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n<pre><code class=\"javascript\">export const vuView= (appMenu, view)=&gt; m(vuMain, appMenu, view);<\/code><\/pre>\n<p>  \u042d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u0435\u0440\u0442\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 vuMain, \u0435\u0441\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442 appMenu \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u043c, \u0438\u043c\u0435\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u043f\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0441 \u0432\u043d\u0435\u0448\u043d\u0438\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c, \u0442\u043e \u0442\u0430\u043a\u0430\u044f \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 (\u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044c\u0448\u0435).<\/p>\n<p>  \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 vuMain:<\/p>\n<pre><code class=\"javascript\">const vuMain= function(ivnode) {   \/\/ We use ivnode as argument as it is initial vnode   const { menu }= ivnode.attrs;   return { view(vnode) {     \/\/ IMPORTANT !     \/\/ If we use vnode inside the view function we MUST provide it for view     return [       m(menu),       m('#layout', vnode.children)     ];   }}; };<\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f vnodes \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  \u0417\u0434\u0435\u0441\u044c \u0438 \u0434\u0430\u043b\u0435\u0435, \u0433\u0434\u0435 \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u044f. \u0417\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0435\u0434\u0438\u043d\u043e\u0436\u0434\u044b \u043f\u0440\u0438 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0438 \u0445\u0440\u0430\u043d\u044f\u0442 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e \u0432\u0441\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. <\/p>\n<p>  \u0417\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u0434\u043e\u043b\u0436\u043d\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n<p>  \u0418 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"javascript\">export const vuApp= function(ivnode) {   const { model }= ivnode.attrs;   \/\/initially get notes   moModel.getList( model );      return { view() {      return [       m(vuNotes, { model }),       m(vuNoteForm, { model }),       vuModalDialog(model)     ];   }}; }<\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u044c, \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u044f \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u0435\u0441\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u0438\u0437 \u0411\u0414. \u041d\u0430 \u0441\u0442\u0430\u043d\u0438\u0446\u0435 \u0431\u0443\u0434\u0443\u0442 \u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n<ul>\n<li>vuNotes \u2014 \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u0441 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c,<\/li>\n<li>vuNoteForm \u2013 \u0444\u043e\u0440\u043c\u0430 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u0430\u043c\u0435\u0442\u043a\u0438,<\/li>\n<li>vuModalDialog \u2013 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 dialog, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e, \u0438 \u0437\u0430\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e. <\/li>\n<\/ul>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0438\u0437 \u044d\u0442\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a \u0441\u0435\u0431\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c, \u043c\u044b \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442 \u043c\u043e\u0434\u0435\u043b\u0438.<\/p>\n<p>  \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u043c\u0435\u0442\u043e\u043a:<\/p>\n<pre><code class=\"javascript\">\/\/Notes List export const vuNotes= function(ivnode) {   const { model }= ivnode.attrs;   const _display= ()=&gt; model.editMode ? 'display:none': 'display:block';   const vuNote= noteItem(model); \/\/ returns note function      return { view() {     return model.error ? m('h2', {style: 'color:red'}, model.error) :     !model.list ? m('h1', '...LOADING' ) :     m('div', { style: _display() }, [       m(addButton , { model } ),       m('.pure-g', m('.pure-u-1-2.pure-u-md-1-1',         m('.notes', model.list.map( vuNote ) )       ))     ]);   }}; } <\/code><\/pre>\n<p>  \u0412 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f bool \u0444\u043b\u0430\u0433 editMode, \u0435\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0444\u043b\u0430\u0433\u0430 true, \u0442\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0444\u043e\u0440\u043c\u0443 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u2014 \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u043c\u0435\u0442\u043e\u043a. \u041c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043f\u043e\u0434\u043d\u044f\u0442\u044c \u043d\u0430 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0432\u044b\u0448\u0435, \u043d\u043e \u0442\u043e\u0433\u0434\u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0443\u0437\u043b\u043e\u0432 \u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0443\u0437\u043b\u043e\u0432 DOM \u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c \u0431\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u0444\u043b\u0430\u0433\u0430, \u0430 \u044d\u0442\u043e \u043b\u0438\u0448\u043d\u044f\u044f \u0440\u0430\u0431\u043e\u0442\u0430. <\/p>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0438\u0434\u0438\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u043e \u0434\u043b\u044f \u043c\u0438\u0442\u0440\u0438\u043b, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044f \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0438\u043b\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0432 \u043c\u043e\u0434\u0435\u043b\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u0440\u043d\u0430\u0440\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432.<\/p>\n<p>  \u0412\u043e\u0442 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0435\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u043c\u0435\u0442\u043a\u0438:<\/p>\n<pre><code class=\"javascript\">const noteItem= model=&gt; {   \/\/ click event handler   const event= ( msg, word='', time=null)=&gt; e=&gt; {     model.getItem(e.target.getAttribute('data'));     if ( !!msg ) {       model.save= { err: false, msg: msg };       model.word= word;       if ( !!time )         model.item.completed= time;       vuDialog.open();     } else {       model.editMode= true;     }   };   \/\/ trash icon's click handler   const _trash= event('trash', 'Dlelete');      \/\/ check icon's click handler   const _check= event('check', 'Complete',     \/\/ postgre timestamp string     new Date().toISOString().split('.')[0].replace('T', ' '));      \/\/ edit this note   const _edit= event('');      const _time= ts=&gt; ts.split('.')[0];      \/\/ Single Note    const _note= note=&gt; m('section.note', {key: note.id}, [     m('header.note-header', [ m('p.note-meta', [       \/\/ note metadata       m('span', { style: 'padding: right: 3em' }, `Created: ${_time( note.created )}`),       note.completed ? m('span', `  Completed: ${_time( note.completed )}`) : '',        \/\/ note right panel        m('a.note-pan', m('i.fas.fa-trash', { data: note.id, onclick: _trash } )),       note.completed ? '' : [         m('a.note-pan', m('i.fas.fa-pen', {data: note.id, onclick: _edit } )),         m('a.note-pan', m('i.fas.fa-check', { data: note.id, onclick: _check} ))       ]     ]),       m('h2.note-title', { style: note.completed ? 'text-decoration: line-through': ''}, note.title)     ]),     m('.note-content', m('p', note.content))   ]);   return _note; } <\/code><\/pre>\n<p>  \u0412\u0441\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043a\u043b\u0438\u043a\u043e\u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e. \u041c\u043e\u0434\u0435\u043b\u044c \u043d\u0435 \u0437\u043d\u0430\u0435\u0442, \u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d \u043e\u0431\u044a\u0435\u043a\u0442 note, \u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e key, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 model.list \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u041e\u0434\u043d\u0430\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0442\u043e\u0447\u043d\u043e \u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043d \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442.<\/p>\n<p>  \u041f\u043e\u043b\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u043a\u043e\u0434\u0430 \u0444\u043e\u0440\u043c\u044b \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u044f \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0443, \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b:<\/p>\n<pre><code class=\"javascript\">\/\/ form submit handler   const _submit= e=&gt; {     e.preventDefault();     model.item.title= clean(model.item.title);     model.item.content= clean(model.item.content);     const check= check_note(model.item);     if ( !!check ) {       model.save= { err: true, msg: check };        model.word= 'Edit';       vuDialog.open();       return false;     }      return moModel.formSubmit(e, model, _method() ).then(       ()=&gt; { model.editMode=false; return true;}).catch(       ()=&gt; { vuDialog.open(); return false; } );   };<\/code><\/pre>\n<p>   \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0438, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043c\u043e\u0434\u0435\u043b\u044c, \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043c\u044b \u043f\u0440\u043e\u043c\u0438\u0441 \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430: \u0437\u0430\u043f\u0440\u0435\u0442 \u043d\u0430 \u043f\u043e\u043a\u0430\u0437 \u0444\u043e\u0440\u043c\u044b \u043f\u0440\u0438 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u043c \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u0438\u043b\u0438 \u043f\u0440\u0438 \u043e\u0448\u0438\u0431\u043a\u0435 \u2014 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u0434\u0438\u0430\u043b\u043e\u0433\u0430 \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u043e\u0448\u0438\u0431\u043a\u0438.<\/p>\n<p>  \u041f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043a \u0431\u044d\u043a\u0435\u043d\u0434 \u0441\u0435\u0440\u0432\u0435\u0440\u0443, \u043f\u0435\u0440\u0435\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u043c\u0435\u0442\u043e\u043a. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0435\u0442 \u043d\u0443\u0436\u0434\u044b \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0432 \u043f\u0430\u043c\u044f\u0442\u0438, \u0445\u043e\u0442\u044f \u044d\u0442\u043e \u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c. <\/p>\n<p>  \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 dialog, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 <a href=\"https:\/\/github.com\/SLikhachev\/mithril-notes\">\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>, \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u043d\u0443\u0442\u044c \u2014 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u044b\u0439 \u043b\u0438\u0442\u0435\u0440\u0430\u043b \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0445\u043e\u0447\u0443, \u0447\u0442\u043e\u0431\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f \u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u043e\u043a\u043d\u0430 \u0431\u044b\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u0440\u0443\u0433\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c.<\/p>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>  \u041c\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 SPA \u043d\u0430 javascript \u0438 mithril.js, \u0441\u0442\u0430\u0440\u0430\u044f\u0441\u044c \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u0434\u0438\u043e\u043c\u0430\u0442\u0438\u043a\u0438 \u044d\u0442\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. \u0425\u043e\u0447\u0435\u0442\u0441\u044f \u0435\u0449\u0435 \u0440\u0430\u0437 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u043e\u0434 \u043d\u0430 javascript. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u0447\u0438\u0441\u0442\u044b\u0439. \u041f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043a\u0443\u0441\u043a\u0438 \u043a\u043e\u0434\u0430, \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u0449\u0435\u0435 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/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=\"https:\/\/habr.com\/ru\/post\/492496\/\"> https:\/\/habr.com\/ru\/post\/492496\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/492496\/\"><a href=\"http:\/\/mithril.js.org\/\">Mithril.js <\/a> \u2014 \u043d\u0435\u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041d\u0430 \u0425\u0430\u0431\u0440\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435\u0442 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0439 \u043f\u043e \u044d\u0442\u043e\u0439 \u0442\u0435\u043c\u0435. \u0412 \u044d\u0442\u043e\u0439 \u0437\u0430\u043c\u0435\u0442\u043a\u0435 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 Mithril. \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e \u043c\u043e\u0442\u0438\u0432\u0430\u043c \u0432\u043e\u0442 \u044d\u0442\u043e\u0439 <a href=\"https:\/\/levelup.gitconnected.com\/building-faster-apps-with-vue-3d9a4302061d\">\u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438<\/a> (<a href=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/487684\/\">\u043f\u0435\u0440\u0435\u0432\u043e\u0434<\/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-300221","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/300221","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=300221"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/300221\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=300221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=300221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=300221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}