{"id":298523,"date":"2020-02-11T15:00:14","date_gmt":"2020-02-11T15:00:14","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=298523"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=298523","title":{"rendered":"\u0417\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u043e \u0441 effector-dom \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u0437\u0430\u0434\u0430\u0447"},"content":{"rendered":"\n<div class=\"post__text post__text-html\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/487938\/\">\n<p>\u041c\u043d\u043e\u0433\u0438\u043c \u0443\u0436\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u0435\u043d \u0441\u0442\u0435\u0439\u0442-\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 <strong>effector<\/strong>, \u043a\u0442\u043e-\u0442\u043e \u0435\u0433\u043e \u0443\u0436\u0435 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043c\u043e\u0442\u0440\u0435\u043b, \u043d\u043e \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0432 \u043f\u0440\u043e\u0434\u0435. \u0421 \u043a\u043e\u043d\u0446\u0430 \u043e\u0441\u0435\u043d\u0438 \u0435\u0433\u043e \u0430\u0432\u0442\u043e\u0440 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0434\u0435\u0432\u0442\u0443\u043b\u0437\u044b \u0434\u043b\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0440\u0430, \u0438 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u044d\u0442\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0443 \u043d\u0435\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2014 <strong>effector-dom<\/strong>.<\/p>\n<p>  <\/p>\n<p>\u0421 \u044d\u0442\u0438\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u043c \u0438 \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043c\u0441\u044f \u2014 \u0432 \u044d\u0442\u043e\u043c \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0435 \u043c\u044b \u0441 \u0432\u0430\u043c\u0438 \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 Todo \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/kr\/xi\/pv\/krxipv3g8jrmgmod4mh2qwcsmu8.png\"\/><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/www.npmjs.com\/package\/effector\"><strong>effector<\/strong><\/a>, \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2014 <a href=\"https:\/\/www.npmjs.com\/package\/effector-dom\"><strong>effector-dom<\/strong><\/a>.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u0442\u0438\u043c\u043f\u043b\u0435\u0439\u0442 <a href=\"https:\/\/github.com\/tastejs\/todomvc-app-template\"><strong>todomvc-app-template<\/strong><\/a> \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438 <a href=\"https:\/\/github.com\/tastejs\/todomvc-app-css\"><strong>todomvc-app-css<\/strong><\/a> \u0437\u0430 \u0430\u0432\u0442\u043e\u0440\u0441\u0442\u0432\u043e\u043c <strong>tastejs<\/strong>.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<h4 id=\"1-podgotovka-proekta\">1. \u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h4>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u044e, \u0447\u0442\u043e \u0432\u044b \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u0432\u044d\u0431\u043f\u0430\u043a\u043e\u043c \u0438 npm, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0448\u0430\u0433 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 npm, \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441 webpack \u0438 \u0437\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u044b \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u043c (\u0435\u0441\u043b\u0438 \u043d\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u2014 \u0442\u043e \u0432 \u0433\u0443\u0433\u043b\u0435 webpack boilerplate).<\/p>\n<p>  <\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u044b \u0441 \u0432\u0435\u0440\u0441\u0438\u044f\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438:<br \/>  <code>npm install effector@20.11.5 effector-dom@0.0.10 todomvc-app-css<\/code><\/p>\n<p>  <\/p>\n<h4 id=\"2-nachnem\">2. \u041d\u0430\u0447\u043d\u0435\u043c<\/h4>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c\u0441\u044f \u0441\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0421\u0440\u0430\u0437\u0443 \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c\u0441\u044f, \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u0430\u043c\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0430\u0431\u043e\u0442\u044b, \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e best practices \u043f\u043e \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044e \u043d\u0430 \u0444\u0438\u0447\u0438.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u0447\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u0438\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043e\u0442 \u043b\u043e\u0433\u0438\u043a\u0438 \u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0432\u044b\u043d\u0435\u0441\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0439 \u043a\u043e\u0434.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u0447\u0435\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">srs\/   view\/     app.js \/\/ \u0432\u0441\u044f \u0432\u044c\u044e\u0445\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f     title.js \/\/ \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a     footer.js \/\/ \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0437\u0430\u0434\u0430\u0447, \u043a\u043d\u043e\u043f\u043a\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438, \u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0445     header.js \/\/ \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438, \u0432\u044b\u0431\u043e\u0440 \u0432\u0441\u0435\u0445 \u0437\u0430\u0434\u0430\u0447     main.js \/\/ \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0434\u0430\u0447     todoItem.js \/\/ \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430, \u0432\u044b\u0431\u043e\u0440 \u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435   model.js \/\/ \u043b\u043e\u0433\u0438\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u044b   index.js \/\/ \u0432\u0445\u043e\u0434 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"3-sozdanie-logiki\">3. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043b\u043e\u0433\u0438\u043a\u0438<\/h4>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0432 \u043d\u0430 \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0431\u044b\u0441\u0442\u0440\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f: \u0437\u0430\u0434\u0430\u0447\u0443 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c, \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u0439 \u0438\u043b\u0438 \u0432\u0441\u0435\u0445 \u0441\u0440\u0430\u0437\u0443, \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0435.<\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0440\u0435 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043b\u044e\u0431\u044b\u0445 (\u043a\u0440\u043e\u043c\u0435 undefined) \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f Store, \u0434\u043b\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u2014 Event.<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441\u0442\u043e\u0440\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 combine, \u044d\u0442\u043e \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u043b\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0437\u0430\u0434\u0430\u0447.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ src\/model.js import {createStore, createEvent, combine} from 'effector';  \/\/ \u0441\u0442\u043e\u0440\u044b  \/\/ \u0432\u0441\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 export const $todos = createStore([]);   \/\/ \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0444\u0438\u043b\u044c\u0442\u0440, \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u0431\u0443\u0434\u0435\u0442 null\/true\/false export const $activeFilter = createStore(null);   \/\/ \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 export const $filteredTodos = combine(   $todos,   $activeFilter,   (todos, filter) =&gt; filter === null     ? todos     : todos.filter(todo =&gt; todo.completed === filter) );  \/\/ \u0441\u043e\u0431\u044b\u0442\u0438\u044f  \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 export const appended = createEvent();   \/\/ \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\/\u0441\u043d\u044f\u0442\u0438\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438 export const toggled = createEvent();  \/\/ \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 export const removed = createEvent();  \/\/ \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u0437\u0430\u0434\u0430\u0447  export const allCompleted = createEvent();  \/\/ \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 export const completedRemoved = createEvent();  \/\/ \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u044f \u0437\u0430\u0434\u0430\u0447 export const filtered = createEvent();<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u044b \u0438 \u0438\u0432\u0435\u043d\u0442\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0438\u0445 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.<br \/>  \u0421\u0442\u043e\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0442\u043e\u0440\u043e\u0432, \u0441\u0434\u0435\u043b\u0430\u0432 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 \u0447\u0435\u0440\u0435\u0437 store.on<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ src\/model.js ...  $todos   \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438   .on(appended, (state, title) =&gt; [...state, {title, completed: false}])   \/\/ \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438. \u0414\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c title   .on(removed, (state, title) =&gt; state.filter(item =&gt; item.title !== title))    \/\/ \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\/\u0441\u043d\u044f\u0442\u0438\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f   .on(toggled, (state, title) =&gt; state.map(item =&gt; item.title === title      ? ({...item, completed: !item.completed})     : item))   \/\/ \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u0437\u0430\u0434\u0430\u0447   .on(allCompleted, state =&gt; state.map(item =&gt; item.completed     ? item     : ({...item, completed: true})))   \/\/ \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447   .on(completedRemoved, state =&gt; state.filter(item =&gt; !item.completed));  $activeFilter   \/\/ \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u044f   .on(filtered, (_, filter) =&gt; filter);<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u043e\u0442 \u0438 \u0432\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u043e\u0440\u043e\u0432 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u0438\u043c\u0438.<\/p>\n<p>  <\/p>\n<h4 id=\"4-sozdanie-obschey-view\">4. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043e\u0431\u0449\u0435\u0439 view<\/h4>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0432\u0430\u044f view \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f effector-dom. \u041f\u043e \u0441\u043b\u043e\u0432\u0430\u043c \u0430\u0432\u0442\u043e\u0440\u0430, \u043e\u043d \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u043b\u044f\u043b\u0441\u044f SwiftUI \u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u044d\u0442\u043e \u0447\u0443\u0432\u0441\u0442\u0432\u0443\u0435\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e \u0434\u0430\u043d\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u043e\u043d \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 \u0441\u0442\u044d\u043a\u0435, \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043b\u0431\u044d\u043a\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0441\u0442\u0440\u043e\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u043e\u0434\u0438\u043d \u0440\u0430\u0437. \u0412\u0441\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u043f\u0440\u044f\u043c\u043e\u043c \u0431\u0438\u043d\u0434\u0438\u043d\u0433\u0435 dom-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043a \u044e\u043d\u0438\u0442\u0430\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0440\u0430 \u0438 \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a \u043a\u043e\u043b\u0431\u044d\u043a\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 effector-dom \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u0435\u0433\u043e \u0441 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c dom \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c, \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0438 \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f using, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u0430\u043c dom-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438 \u043a\u043e\u043b\u0431\u044d\u043a, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ src\/index.js import {using} from 'effector-dom'; import {App} from '.\/view\/app';  using(document.body, () =&gt; {   App(); });<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 h, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 \u0441 \u0442\u0438\u043f\u043e\u043c dom-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u043a\u043e\u043b\u0431\u044d\u043a, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 dom-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f spec, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0432\u044b\u0437\u0432\u0430\u043d\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u0431\u044d\u043a\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ src\/view\/app.js import {h, spec} from 'effector-dom'; import classes from 'todomvc-app-css\/index.css'; import {Header} from '.\/header'; import {Main} from '.\/main'; import {Footer} from '.\/footer';  export const App = () =&gt; {   \/\/ \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c section \u044d\u043b\u0435\u043c\u0435\u043d\u0442   h('section', () =&gt; {     \/\/ \u0438 \u0443\u043a\u0430\u0436\u0435\u043c \u0435\u043c\u0443 \u043a\u043b\u0430\u0441\u0441     spec({attr: {class: classes.todoapp}});      \/\/ \u0442\u0430\u043a\u0436\u0435 \u0432\u044b\u0432\u0435\u0434\u0435\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f     Header();     Main();     Footer();   }); };<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u0436\u0435 \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u044c\u044e\u0445\u0438.<\/p>\n<p>  <\/p>\n<h4 id=\"5-sozdanie-zagolovka\">5. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430<\/h4>\n<p>  <\/p>\n<p>\u041f\u043e \u0444\u0430\u043a\u0442\u0443 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e h1 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e dom-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u0431\u0435\u0437 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u044b\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u043e\u043c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e spec \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u0432\u0442\u043e\u0440\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ src\/view\/title.js import {h} from 'effector-dom';  export const Title = () =&gt; {   h('h1', {text: 'todos'}); };<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"6-sozdanie-novoy-zadachi\">6. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438<\/h4>\n<p>  <\/p>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0441\u0432\u043e\u0435\u043c\u0443 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0443, \u0432 effector-dom \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u044e\u043d\u0438\u0442\u044b effector \u043f\u0440\u044f\u043c\u043e \u0432 \u043a\u043e\u043b\u0431\u044d\u043a\u0435, \u043d\u0435 \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u044f\u0441\u044c \u043e \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430\u0445, \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0435 \u043c\u0443\u0441\u043e\u0440\u0430 \u0438 \u0442.\u0434.<\/p>\n<p>  <\/p>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u043e\u0440\u043c\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u0437\u0430\u043e\u0434\u043d\u043e \u043a\u043d\u043e\u043f\u043a\u0443 \u0432\u044b\u0431\u043e\u0440\u0430 \u0432\u0441\u0435\u0445 \u0437\u0430\u0434\u0430\u0447, \u0432\u0441\u0435 \u043e\u0431\u0435\u0440\u043d\u0435\u043c \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 header. \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u043a dom-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0442\u0430\u043a\u0436\u0435 \u0432 spec (\u0438\u043b\u0438 \u0432 \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435), \u0432 \u043a\u043b\u044e\u0447\u0435 handler.<\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u043d\u043e\u0432\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u0438 \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u043f\u043e\u0441\u043b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u043c input \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u043c, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0442\u043e\u0440 $value \u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 input.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0432\u0432\u043e\u0434\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 sample \u0438 \u0437\u0430\u043e\u0434\u043d\u043e \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u0443\u0435\u043c \u043d\u0430 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445. \u0412 api \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0440\u0430 sample \u2014 \u044d\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043e\u0449\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043d\u043e \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0443\u044e \u0444\u043e\u0440\u043c\u0443 \u2014 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0438\u0434\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u0442\u043e\u0440\u0430 \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0430: event = sample($store, triggerEvent).<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ src\/view\/header.js import {h, spec} from 'effector-dom'; import {createEvent, createStore, forward, sample} from 'effector'; import classes from 'todomvc-app-css\/index.css'; import {Title} from '.\/title'; import {appended} from '..\/model';  export const Header = () =&gt; {   h('header', () =&gt; {     Title();      h('input', () =&gt; {       const keypress = createEvent();       const input = createEvent();        \/\/ \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0438\u043b\u044c\u0442\u0440\u0443\u0435\u043c\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435,       const submit = keypress.filter({fn: e =&gt; e.key === 'Enter'});        \/\/ \u0441\u0442\u043e\u0440 \u0441 \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0438\u043d\u043f\u0443\u0442\u0430       const $value = createStore('')         .on(input, (_, e) =&gt; e.target.value)         .reset(appended); \/\/ \u0437\u0430\u043e\u0434\u043d\u043e \u043e\u0447\u0438\u0441\u0442\u0438\u043c \u043f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435        \/\/ \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432 \u0434\u0440\u0443\u0433\u043e\u0435 \u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0440\u0435 \u0435\u0441\u0442\u044c forward({from, to})       forward({          \/\/ \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 $value \u043f\u043e \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0443 submit,         \/\/ \u0438 \u0441\u0440\u0430\u0437\u0443 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f         from: sample($value, submit).filter({fn: Boolean}),          to: appended,       });        spec({         attr: {           class: classes[&quot;new-todo&quot;],           placeholder: 'What needs to be done?',           value: $value         },         handler: {keypress, input},       })     });   }); };<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"7-sozdanie-spiska-zadach\">7. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u0437\u0430\u0434\u0430\u0447<\/h4>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0441\u043f\u0438\u0441\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0432 effector-dom \u0435\u0441\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f list.<\/p>\n<p>  <\/p>\n<p>\u0421\u043f\u043e\u0441\u043e\u0431 \u0432\u044b\u0437\u043e\u0432\u0430 \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u2014 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043c, \u043a\u043b\u044e\u0447\u0435\u043c \u0438 \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u043d\u0443\u0436\u043d\u044b\u0445 \u043f\u043e\u043b\u0435\u0439, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043a\u043e\u043b\u0431\u044d\u043a \u0434\u043b\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0415\u0441\u0442\u044c \u0435\u0449\u0435 \u0438 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0432\u044b\u0437\u043e\u0432 list($store, itemCallback) \u043d\u043e \u043e\u043d \u043d\u0430\u043c \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442.<\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u043e\u0434\u043d\u043e \u0432\u044b\u0432\u0435\u0434\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0437\u0430\u0434\u0430\u0447.<\/p>\n<p>  <\/p>\n<p>\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0432 \u0441\u0442\u0438\u043b\u044f\u0445 todomvc-app-css \u044d\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0430 \u0441\u0434\u0435\u043b\u0430\u043d\u0430 \u043f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e \u0432 \u043e\u0434\u043d\u043e\u0439 \u0441\u0435\u043a\u0446\u0438\u0438 \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c, \u0445\u043e\u0442\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0437\u0434\u0435\u0441\u044c \u0436\u0435.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ src\/view\/main.js import {h, spec, list} from 'effector-dom'; import classes from 'todomvc-app-css\/index.css'; import {TodoItem} from '.\/todoItem'; import {$filteredTodos, allCompleted} from '..\/model';  export const Main = () =&gt; {   h('section', () =&gt; {     spec({attr: {class: classes.main}});      \/\/ \u0432\u044b\u0431\u043e\u0440 \u0432\u0441\u0435\u0445 \u0437\u0430\u0434\u0430\u0447     h('input', {       attr: {id: 'toggle-all', class: classes['toggle-all'], type: 'checkbox'}     });     h('label', {attr: {for: 'toggle-all'}, handler: {click: allCompleted}});      \/\/ \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0434\u0430\u0447     h('ul', () =&gt; {       spec({attr: {class: classes[&quot;todo-list&quot;]}});       list({         source: $filteredTodos,         key: 'title',         fields: ['title', 'completed']         \/\/ \u0432 fields \u043e\u043a\u0430\u0436\u0443\u0442\u0441\u044f \u0441\u0442\u043e\u0440\u044b \u0441 \u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c       }, ({fields: [title, completed], key}) =&gt; TodoItem({title, completed, key}));      });   }); };<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"8-sozdanie-otdelnoy-zadachi\">8. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438<\/h4>\n<p>  <\/p>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0441\u0432\u043e\u0435\u043c\u0443 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0443, \u0432 effector-dom \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u044b\u0435 \u0441\u0442\u043e\u0440\u044b \u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0431\u0435\u0437 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430\u043c\u0438, \u0443\u0442\u0435\u0447\u043a\u0430\u043c\u0438 \u043f\u0430\u043c\u044f\u0442\u0438 \u0438 \u0442.\u0434. <\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u0437\u0430\u0434\u0430\u0447 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e, \u0442\u043e \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0438 toggled \u0438 removed \u043a\u0430\u043a-\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043f\u0440\u0438\u0437\u043d\u0430\u043a \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u2014 \u043a\u043b\u044e\u0447.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e effector \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441 \u043f\u0440\u0435\u0434\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u2014 \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 event.prepend.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u043c \u0437\u0430\u0434\u0430\u0447\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u044b\u0439 \u0441\u0442\u043e\u0440 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e store.map<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ src\/view\/todoItem.js import {h, spec} from 'effector-dom'; import classes from 'todomvc-app-css\/index.css'; import {toggled, removed} from '..\/model';  \/\/ title \u0438 completed - \u0441\u0442\u043e\u0440\u044b \u0441 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 export const TodoItem = ({title, completed, key}) =&gt; {   h('li', () =&gt; {     \/\/ \u043d\u043e\u0432\u044b\u0439 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u044b\u0439 \u0441\u0442\u043e\u0440 \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u043f\u043e \u0444\u043b\u0430\u0433\u0443     spec({attr: {class: completed.map(flag =&gt; flag ? classes.completed : false)}});      h('div', () =&gt; {       spec({attr: {class: classes.view}});        h('input', {         attr: {class: classes.toggle, type: 'checkbox', checked: completed},         \/\/ \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441 \u043f\u0440\u0435\u0434\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432         handler: {click: toggled.prepend(() =&gt; key)},       });        h('label', {text: title});        h('button', {         attr: {class: classes.destroy},         \/\/ \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441 \u043f\u0440\u0435\u0434\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432         handler: {click: removed.prepend(() =&gt; key)},       });     });   }); };<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"9-sozdanie-futera\">9. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0444\u0443\u0442\u0435\u0440\u0430<\/h4>\n<p>  <\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0443\u0436\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0443\u0442\u0435\u0440 \u0441 \u043a\u0430\u0443\u043d\u0442\u0435\u0440\u043e\u043c \u0437\u0430\u0434\u0430\u0447, \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ src\/view\/footer.js import {h, spec} from 'effector-dom'; import classes from 'todomvc-app-css\/index.css'; import {$todos, $activeFilter, filtered, completedRemoved} from '..\/model';  export const Footer = () =&gt; {   h('footer', () =&gt; {     spec({attr: {class: classes['footer']}});      h('span', () =&gt; { \/\/ \u041a\u0430\u0443\u043d\u0442\u0435\u0440 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447       spec({attr: {class: classes['todo-count']}});        const $activeCount = $todos.map(         todos =&gt; todos.filter(todo =&gt; !todo.completed).length       );        h('strong', {text: $activeCount});       h('span', {text: $activeCount.map(count =&gt; count === 1         ? ' item left'         : ' items left'       )});     });      h('ul', () =&gt; { \/\/ \u043a\u043d\u043e\u043f\u043a\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432, \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u043e\u0432\u043e\u0433\u043e       spec({attr: {class: classes.filters}});        h('li', () =&gt; {         h('a', {           attr: {class: $activeFilter.map(active =&gt; active === null             ? classes.selected             : false           )},           text: 'All',           handler: {click: filtered.prepend(() =&gt; null)},         });       });        h('li', () =&gt; {         h('a', {           attr: {class: $activeFilter.map(completed =&gt; completed === false             ? classes.selected             : false           )},           text: 'Active',           handler: {click: filtered.prepend(() =&gt; false)},           });       });        h('li', () =&gt; {         h('a', {           attr: {class: $activeFilter.map(completed =&gt; completed === true             ? classes.selected             : false           )},           text: 'Completed',           handler: {click: filtered.prepend(() =&gt; true)},         });       });     });      h('button', {       attr: {class: classes['clear-completed']},       text: 'Clear completed',       handler: {click: completedRemoved},     });   }); };<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"10-utochneniya\">10. \u0423\u0442\u043e\u0447\u043d\u0435\u043d\u0438\u044f<\/h4>\n<p>  <\/p>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0434\u0435\u043b\u0430\u043b\u043e\u0441\u044c \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0449\u0435, \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u0442\u0435 \u0436\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0442\u0438\u043f \u0444\u0438\u043b\u044c\u0442\u0440\u0430 \u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const FilterButton = ({filter, text}) =&gt; {   h('li', () =&gt; {     h('a', {       attr: {class: $activeFilter.map(completed =&gt; completed === filter         ? classes.selected         : false       )},       text: text,       handler: {click: filtered.prepend(() =&gt; filter)},       });   }); };  h('ul', () =&gt; {    spec({attr: {class: classes.filters}});    FilterButton({filter: null, text: 'All'});   FilterButton({filter: false, text: 'Active'});   FilterButton({filter: true, text: 'Completed'}); });<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u0436\u0435 \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0441\u0432\u043e\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u0442\u044d\u043a\u0430, effector-dom \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043d\u043e \u0438 \u043e\u0431\u0449\u0435\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u0412\u044b\u043d\u0435\u0441\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u043a \u043d\u0443\u0436\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const WithFocus = () =&gt; {   const focus = createEvent();   focus.watch(() =&gt; console.log('focused'));    spec({handler: {focus}}); };  h('input', () =&gt; {   ...   WithFocus();   ... });<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"11-itogo\">11. \u0418\u0442\u043e\u0433\u043e<\/h4>\n<p>  <\/p>\n<p>\u041c\u0435\u043d\u044f \u043b\u0438\u0447\u043d\u043e \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0438\u043b\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u043e\u0432\u044b\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u043c, \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0443 \u043c\u0435\u043d\u044f \u0443\u0436\u0435 \u0431\u044b\u043b \u043e\u043f\u044b\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 effector \u0432 \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u0416\u0434\u0443 \u0441 \u043d\u0435\u0442\u0435\u0440\u043f\u0435\u043d\u0438\u0435\u043c \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438, \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440 \u0432 \u043f\u0440\u043e\u0434\u0435.<\/p>\n<\/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\/487938\/\"> https:\/\/habr.com\/ru\/post\/487938\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/487938\/\">\n<p>\u041c\u043d\u043e\u0433\u0438\u043c \u0443\u0436\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u0435\u043d \u0441\u0442\u0435\u0439\u0442-\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 <strong>effector<\/strong>, \u043a\u0442\u043e-\u0442\u043e \u0435\u0433\u043e \u0443\u0436\u0435 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043c\u043e\u0442\u0440\u0435\u043b, \u043d\u043e \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0432 \u043f\u0440\u043e\u0434\u0435. \u0421 \u043a\u043e\u043d\u0446\u0430 \u043e\u0441\u0435\u043d\u0438 \u0435\u0433\u043e \u0430\u0432\u0442\u043e\u0440 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0434\u0435\u0432\u0442\u0443\u043b\u0437\u044b \u0434\u043b\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0440\u0430, \u0438 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u044d\u0442\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0443 \u043d\u0435\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2014 <strong>effector-dom<\/strong>.<\/p>\n<p>  <\/p>\n<p>\u0421 \u044d\u0442\u0438\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u043c \u0438 \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043c\u0441\u044f \u2014 \u0432 \u044d\u0442\u043e\u043c \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0435 \u043c\u044b \u0441 \u0432\u0430\u043c\u0438 \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 Todo \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/kr\/xi\/pv\/krxipv3g8jrmgmod4mh2qwcsmu8.png\"\/><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/www.npmjs.com\/package\/effector\"><strong>effector<\/strong><\/a>, \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2014 <a href=\"https:\/\/www.npmjs.com\/package\/effector-dom\"><strong>effector-dom<\/strong><\/a>.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u0442\u0438\u043c\u043f\u043b\u0435\u0439\u0442 <a href=\"https:\/\/github.com\/tastejs\/todomvc-app-template\"><strong>todomvc-app-template<\/strong><\/a> \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438 <a href=\"https:\/\/github.com\/tastejs\/todomvc-app-css\"><strong>todomvc-app-css<\/strong><\/a> \u0437\u0430 \u0430\u0432\u0442\u043e\u0440\u0441\u0442\u0432\u043e\u043c <strong>tastejs<\/strong>.<\/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-298523","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/298523","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=298523"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/298523\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=298523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=298523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=298523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}