{"id":305297,"date":"2020-06-13T21:00:36","date_gmt":"2020-06-13T21:00:36","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=305297"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=305297","title":{"rendered":"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430 SPA \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u043c\u0430\u0433\u0430\u0437\u0438\u043d\u0430 \u043d\u0430 htmlix.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\/506572\/\">\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u043e\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u0434\u043b\u044f \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430 SPA \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u043c\u0430\u0433\u0430\u0437\u0438\u043d\u0430. \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u043d\u0430 node.js \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c express, \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u0430 \u2014 twig, \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u2014 NeDB, \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0444\u043e\u0440\u043c \u2014 \u043c\u043e\u0434\u0443\u043b\u044c formidable, \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u043d\u0430 htmlix.<\/p>\n<p>  \u0414\u043b\u044f \u0442\u0435\u0445 \u043a\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u043a\u043e\u043c \u0441 Htmlix, \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u044b \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/github.com\/SergeyOvechkin\/htmlix\"> \u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  \u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0443\u0440\u043e\u043a\u0430 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0447\u0430\u0442\u044c <a href=\"https:\/\/github.com\/SergeyOvechkin\/lesson_2.2\"> \u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  \u042d\u0442\u043e \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0434\u0430\u043b\u0438\u043c \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 <b>\/static\/js\/front.js<\/b> \u0432\u0441\u0435 \u0447\u0442\u043e \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u043c \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e:<\/p>\n<pre><code class=\"javascript\">var State = { };  \twindow.onload = function(){ \t\t\t\/\/\/\u0441\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440  HTMLix \t\t\t \t\tvar HM = new HTMLixState(State); \t        console.log(HM); \t} <\/code><\/pre>\n<p>  \u0418\u0442\u0430\u043a \u043c\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0443\u0434\u0430\u043b\u0438\u043b\u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0438\u0437 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u0438 \u0443 \u043d\u0430\u0441 \u043e\u0441\u0442\u0430\u043b\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u043a\u0430\u043a \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442:<\/p>\n<ul>\n<li> \u0441\u043f\u0435\u0440\u0432\u0430 \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0435\u0442, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u0432\u0435\u0434\u0435\u043c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438: <i>npm install<\/i><\/li>\n<li> \u0434\u0430\u043b\u0435\u0435 \u0432\u0432\u0435\u0441\u0442\u0438 \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 <i> node app <\/i> <\/li>\n<li> \u0437\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <i>localhost:3000<\/i> <\/li>\n<\/ul>\n<p>  \u0418\u0442\u0430\u043a \u043f\u043e\u043a\u043b\u0438\u043a\u0430\u0432 \u043f\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c \u043f\u0443\u043d\u043a\u0442\u0430\u043c \u043c\u0435\u043d\u044e \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0439 \u0441\u0435\u0440\u0432\u0435\u0440, \u0431\u0435\u0437 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0447\u0430\u0441\u0442\u0438 \u0442.\u043a. \u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0435\u0435 \u0443\u0434\u0430\u043b\u0438\u043b\u0438.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u043d\u043e\u0432\u043e \u043f\u043e\u044d\u0442\u0430\u043f\u043d\u043e \u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c, \u043d\u043e \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440.<br \/>  <a name=\"habracut\"><\/a><br \/>  \u041f\u0435\u0440\u0435\u0439\u0434\u044f \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 \u00ablocalhost:3000\/\u00bb \u043d\u0430\u043c \u043e\u0442\u0434\u0430\u0435\u0442\u0441\u044f \u0432\u0435\u0440\u0445\u043d\u0435\u0435 \u043c\u0435\u043d\u044e \u0441 \u0442\u0440\u0435\u043c\u044f \u043f\u0443\u043d\u043a\u0442\u0430\u043c\u0438, \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441 \u0448\u0435\u0441\u0442\u044c\u044e \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u0442\u043e\u0432\u0430\u0440\u0430, \u0438 \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439 \u0441 \u043b\u0435\u0432\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u043e\u0442\u0434\u0430\u0442\u044c \u043d\u0430\u043c \u044d\u0442\u043e \u0432\u0441\u0435 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u043e\u0441\u044b\u043b\u0430\u0435\u0442 \u0434\u0432\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043a \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445, \u0432 \u043e\u0434\u043d\u043e\u043c \u043e\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442 \u0432\u0441\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438, \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u043f\u0435\u0440\u0432\u044b\u0435 \u0448\u0435\u0441\u0442\u044c \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0442\u043e\u0432\u0430\u0440\u0430 \u0438\u0437 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u044f\u0435\u0442 \u043a \u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435 \u0442\u043e\u0432\u0430\u0440\u0430 \u0434\u0432\u0430 \u043f\u043e\u043b\u044f \u0438\u0437 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0439 \u043f\u043e id \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0442\u043e\u0432\u0430\u0440\u0430, \u0437\u0430\u0442\u0435\u043c \u043e\u0442\u0434\u0430\u0435\u0442 \u043d\u0430\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 <b>\/views\/index.twig<\/b> \u043f\u0435\u0440\u0435\u0434\u0430\u0432 \u0432 \u043d\u0435\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u043c\u0438 \u2014 <b>categories<\/b> \u0438 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u0442\u043e\u0432\u0430\u0440\u0430 <b>carts<\/b>.<\/p>\n<p>  \u0412 \u0441\u0430\u043c\u043e\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 <b>\/views\/index.twig<\/b> \u043c\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0438\u0437 \u043f\u0430\u043f\u043a\u0438 <b>\/twig_templates<\/b> \u0448\u0430\u043f\u043a\u0443 \u0441\u0430\u0439\u0442\u0430 \u0438 \u0432\u0435\u0440\u0445\u043d\u0435\u0435 \u043c\u0435\u043d\u044e:<\/p>\n<p>  <b>{% include &#8216;\/twig_templates\/header.twig&#8217; %}<\/b><\/p>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0434\u043b\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439, \u0432 \u043d\u0435\u0439 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439 \u0438\u0437 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 <b>categories<\/b>:<\/p>\n<pre><code class=\"html\">&lt;section class=&quot;categories&quot; &gt;    &lt;ul class=&quot;nav flex-column&quot; data-categories=&quot;array&quot;&gt;          {% for category in categories %} \t  \t&lt;li  class=&quot;nav-item&quot; data-category=&quot;container&quot;&gt; \t   &lt;a {% if activeCategory == category.idCategory %} \t\tclass=&quot;nav-link active&quot;  \t      {% else %} \t\t class=&quot;nav-link&quot;  \t      {% endif %}  \t     data-category-click=&quot;click&quot; data-category-title=&quot;text&quot; data-category-class=&quot;class&quot; data-category-data=&quot;{{ category.idCategory }}&quot; class=&quot;nav-link&quot; href=&quot;\/category\/{{ category.idCategory }}&quot;&gt;{{ category.titleCategory }}&lt;\/a&gt; \t&lt;\/li&gt; \t       {% endfor %}    &lt;\/ul&gt; &lt;\/section&gt;  <\/code><\/pre>\n<p>  \u041f\u043e\u043a\u0430 \u0447\u0442\u043e \u043d\u0435 \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u043c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043d\u0430 \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u0442\u0435\u0433\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u0441 data- \u0432\u0441\u0435 \u044d\u0442\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0443 \u0438 \u043d\u0430\u043c \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e.<\/p>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u0432 \u0446\u0438\u043a\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0432\u0441\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0442\u043e\u0432\u0430\u0440\u0430 \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 <b>carts<\/b>:<\/p>\n<pre><code class=\"html\">{% for cart in carts %}     &lt;div data-cart=&quot;container&quot; class=&quot;col-12 col-sm-6  col-lg-4&quot;&gt; \t&lt;div  class=&quot;card&quot; style=&quot;margin-bottom: 10px;&quot;&gt; \t   &lt;img data-cart-src_img=&quot;src&quot; src=&quot;\/static\/upload\/{{cart.image}}&quot; class=&quot;card-img-top&quot; alt=&quot;...&quot;&gt; \t   &lt;div class=&quot;card-body&quot;&gt; \t\t&lt;h5 data-cart-title=&quot;text&quot; class=&quot;card-title&quot;&gt;{{cart.title}}&lt;\/h5&gt; \t\t&lt;h6 data-cart-title_category=&quot;text&quot; class=&quot;card-subtitle mb-2 text-muted&quot;&gt;                         {{cart.titleCategory}}         &lt;\/h6&gt; \t\t&lt;div class=&quot;row justify-content-between&quot;&gt; \t\t    &lt;div class=&quot;col-6&quot;&gt; \t\t\t&lt;h5 data-cart-cost=&quot;text&quot; class=&quot;card-title&quot;&gt;{{cart.cost}}&lt;\/h5&gt; \t\t   &lt;\/div&gt; \t\t   &lt;div class=&quot;col-6&quot; style=&quot;padding-right: 0px;&quot;&gt; \t\t\t&lt;a data-cart-click=&quot;click&quot;  data-cart-data=&quot;\/cart\/{{cart._id}}&quot; href=&quot;\/cart\/{{cart._id}}&quot; class=&quot;btn btn-primary btn-sm&quot;&gt;\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c&lt;\/a&gt; \t\t   &lt;\/div&gt;\t\t\t\t\t\t\t\t\t\t \t        &lt;\/div&gt; \t   &lt;\/div&gt; \t&lt;\/div&gt;    &lt;\/div&gt; \t  {% endfor %}  <\/code><\/pre>\n<p>  \u0417\u0430\u0442\u0435\u043c \u0432 \u0441\u0430\u043c\u043e\u043c \u043a\u043e\u043d\u0446\u0435 \u043c\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c footer, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c <b>htmlix.js<\/b> \u0438 <b>frontend.js<\/b> \u2014 \u043d\u0430\u0448 \u0444\u0430\u0439\u043b \u0441 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043e\u043c:<\/p>\n<p>  <b>{% include &#8216;\/twig_templates\/footer.twig&#8217; %}<\/b><\/p>\n<p>  \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0434\u043b\u044f \u0430\u0434\u0440\u0435\u0441\u0430 <b>\/category\/:idCategory<\/b> \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0432\u0441\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438, \u0437\u0430\u0442\u0435\u043c \u0438\u0449\u0435\u043c \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0442\u043e\u0432\u0430\u0440\u0430 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0430 \u043f\u043e\u0442\u043e\u043c \u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0432\u0441\u0435 \u044d\u0442\u043e \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 <b>\/views\/index.twig<\/b>.<\/p>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0440\u0430\u0437\u0443 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0434\u0432\u0430 \u0430\u0434\u0440\u0435\u0441\u0430: <b>\/json<\/b> \u0438 <b>\/category\/:idCategory\/json<\/b> \u043f\u0435\u0440\u0435\u0439\u0434\u044f \u043f\u043e \u044d\u0442\u0438\u043c \u0430\u0434\u0440\u0435\u0441\u0430\u043c \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u2014 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u0442\u043e\u0432\u0430\u0440\u0430 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 json, \u0434\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0430\u0434\u0440\u0435\u0441\u0430 \u044d\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0435 \u0448\u0435\u0441\u0442\u044c \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a, \u0430 \u0434\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u2014 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 :idCategory.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043c\u0430\u0440\u0448\u0440\u0443\u0442 <b>\/cart\/:idCart<\/b><\/p>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0432\u0441\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438, \u0437\u0430\u0442\u0435\u043c \u043e\u0434\u043d\u0443 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e <b>:idCart<\/b> \u0437\u0430\u0442\u0435\u043c \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u0435\u0439 \u0434\u0432\u0430 \u043f\u043e\u043b\u044f \u0438\u0437 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439, \u0434\u0430\u043b\u0435\u0435 \u043e\u0442\u0434\u0430\u0435\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 <b>\/views\/cart.twig<\/b> \u043f\u0435\u0440\u0435\u0434\u0430\u0432 \u0432 \u043d\u0435\u0433\u043e \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 \u2014 <b>cart<\/b> \u0438 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u043c\u0438 <b>categories<\/b>.<\/p>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 <b>\/twig_templates\/header.twig<\/b>. \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c <b>header<\/b>, \u0437\u0430\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439 \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 <b>categories<\/b>.<\/p>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0434\u043b\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0442\u043e\u0432\u0430\u0440\u0430, \u0432 \u043d\u0435\u0451 \u043c\u044b \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <b>cart<\/b>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043e\u0434\u0438\u043d \u0438\u0437 \u0434\u0432\u0443\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0438\u0437 \u043f\u0430\u043f\u043a\u0438 <b>\/twig_templates\/<\/b>: <b>cart_variant_option.twig<\/b> \u0438\u043b\u0438 <b>cart_variant_radio.twig<\/b> \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0442\u043e\u0432\u0430\u0440\u0430 (\u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0430 \u0438\u043b\u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e).<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;col-md-5&quot;   data-cart_single-variant_tmpl=&quot;render-variant&quot;&gt; \t\t\t\t\t\t \t{% set templ = cart.variant_tmpl %}\t &lt;!-- \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e set templ  \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 cart.variant_tmpl --&gt;\t\t\t \t\t\t\t\t \t{% include  '\/twig_templates\/' ~ templ ~ '.twig' %}  &lt;!-- \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0448\u0430\u0431\u043b\u043e\u043d \u0438\u0437 \u043f\u0430\u043f\u043a\u0438 '\/twig_templates\/' \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u0430  templ --&gt;  &lt;\/div&gt;  <\/code><\/pre>\n<p>  \u0412 \u043a\u043e\u043d\u0446\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c <b>footer<\/b>.<\/p>\n<p>  \u041c\u0430\u0440\u0448\u0440\u0443\u0442 <b>\/cart\/:idCart\/json<\/b> \u043e\u0442\u0434\u0430\u0435\u0442 \u043f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 [], \u0434\u0430\u043d\u043d\u044b\u0439 \u0440\u043e\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438.<\/p>\n<p>  \u0418\u0442\u0430\u043a, \u043c\u044b \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0437\u043d\u0430\u0435\u043c \u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u0434\u043b\u044f \u0442\u0440\u0435\u0445 \u0440\u043e\u0443\u0442\u043e\u0432.<\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u0441 \u0440\u043e\u0443\u0442\u0430\u043c\u0438 <b>&quot;\/&quot;<\/b> \u0438 <b>&quot;\/category\/:idCategory&quot;<\/b>:<\/p>\n<p>  \u0412\u0435\u0440\u0445\u043d\u0435\u0435 \u043c\u0435\u043d\u044e \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u043c, \u0431\u0443\u0434\u0435\u043c \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u0447\u0442\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u0434 \u043d\u0438\u043c.<\/p>\n<p>  \u0417\u0434\u0435\u0441\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430 \u0434\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u044d\u0442\u043e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0442\u043e\u0432\u0430\u0440\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u044d\u0442\u043e: <b>categories<\/b> \u0438 <b>carts<\/b>:<\/p>\n<p>  \u0412 html \u043a\u043e\u0434\u0435 \u0444\u0430\u0439\u043b\u0430 <b>\/views\/index.twig<\/b> \u043e\u043d\u0438 \u0443\u0436\u0435 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u043a\u0430\u043a <b>data-carts=\u00abarray\u00bb<\/b> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u2014 \u043c\u0430\u0441\u0441\u0438\u0432 carts \u0438 <b>data-cart=\u00abcontainer\u00bb<\/b> \u2014 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 cart \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 carts. <b>data-categories=\u00abarray\u00bb<\/b> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u2014 \u043c\u0430\u0441\u0441\u0438\u0432 categories, <b>data-category=\u00abcontainer\u00bb<\/b> \u2014 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 category \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 categories.<\/p>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0438\u0445 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0432 javascript:<\/p>\n<pre><code class=\"javascript\">var State = { \t \tcategories: { \/\/\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \t\tcontainer: &quot;category&quot;, \/\/\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \t\tprops: [ ], \t\tmethods: {  \t\t}\t\t \t}, \tcarts: { \/\/\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0442\u043e\u0432\u0430\u0440\u0430 \t\tcontainer: &quot;cart&quot;, \/\/\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0442\u043e\u0432\u0430\u0440\u0430 \t\tprops: [ ], \t\tmethods: {\t\t\t \t\t}\t\t \t}\t } <\/code><\/pre>\n<p>  \u0418\u0442\u0430\u043a \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0434\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 categories \u0438 carts \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 categories: <\/p>\n<p>  * <b>\u00abdata\u00bb<\/b> \u2014 \u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 idCategory, <br \/>  * <b>\u00abclick\u00bb<\/b> \u2014 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043a\u043b\u0438\u043a\u043e\u0432 \u043f\u043e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438,<br \/>  * <b>&#8216;class&#8217;<\/b> \u2014 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u043b\u0430\u0441\u0441\u0443 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438,<br \/>  * <b>\u00abtitle\u00bb<\/b> \u2014 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0442\u0435\u043a\u0441\u0442\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438, <\/p>\n<p>  \u0412 html \u043a\u043e\u0434\u0435 \u0444\u0430\u0439\u043b\u0430 <b>\/views\/index.twig<\/b> \u043e\u043d\u0438 \u0443\u0436\u0435 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u043a\u0430\u043a data-<b>category-data<\/b>=&quot;{{ category.idCategory }}&quot;, data-<b>category-click<\/b>=\u00abclick\u00bb, data-<b>category-class<\/b>=\u00abclass\u00bb, data-<b>category-title<\/b>=\u00abtext\u00bb.<\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u0445 \u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"javascript\">\tcategories: { \t\tcontainer: &quot;category&quot;,  \t\tprops: [ &quot;data&quot;, &quot;click&quot;, 'class', &quot;title&quot;], \t\tmethods: { \t\t  click: function(){ \t\t\t\t\t\t\t\t \t\t\t\tevent.preventDefault();\t\t\t\t                                console.log(this); \t\t\t\t\t\t\t\t \t\t\t}, \t\t}\t\t \t},  <\/code><\/pre>\n<p>  \u0418\u0442\u0430\u043a \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0447\u0435\u0442\u044b\u0440\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 ( \u00abcategory\u00bb ), \u0438 \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u00abclick\u00bb \u043c\u0435\u0442\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442, \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u043c\u0435\u043d\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438:<\/p>\n<p>  <b>1<\/b> \u2014 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u0442\u043e\u0432\u0430\u0440\u0430 \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u2014 \u043c\u0430\u0441\u0441\u0438\u0432 <b>carts<\/b> \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445.<br \/>   <b>2<\/b> \u2014 \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043a\u043b\u0430\u0441\u0441 .active \u0443 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0443 \u043d\u043e\u0432\u043e\u0439 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438.<\/p>\n<p>  \u0414\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u0443\u043d\u043a\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u0435\u0442\u043e\u0434 <b>load_carts<\/b> \u0432 \u043e\u0431\u0449\u0438\u0445 \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u0435\u0442\u043e\u0434\u0430\u0445 <b>stateMethods<\/b> \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <b>carts<\/b> \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <b>stateProperties<\/b> \u2014 \u043e\u0431\u0449\u0438\u0445 \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445;<\/p>\n<p>  \u0414\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u0443\u043d\u043a\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <b>\u00abemiter-click-on-category\u00bb<\/b> \u0438 \u0431\u0443\u0434\u0435\u043c \u0441\u043b\u0443\u0448\u0430\u0442\u044c \u0435\u0433\u043e \u0432\u043e \u0432\u0441\u0435\u0445 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u0445 <b>category<\/b> \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438\u043b\u0438 \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043a\u043b\u0430\u0441\u0441 \u043f\u0440\u0438 \u0435\u0433\u043e \u043d\u0430\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0438, \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0431\u0443\u0434\u0435\u043c \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <b>click<\/b> \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 <b>category<\/b>.<\/p>\n<p>  \u0418\u0442\u0430\u043a \u043d\u0430\u043f\u043e\u043c\u043d\u044e \u0447\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 props \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043b\u0438\u0431\u043e arrayProps \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0442\u044c \u0434\u0432\u0443\u043c\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438 \u044d\u0442\u043e, \u043f\u043e \u0438\u043c\u0435\u043d\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u00abclick\u00bb \u0442\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 html \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u043a\u0430\u043a <b>data-\u0438\u043c\u044f_\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430-click=\u00abclick\u00bb<\/b>.<\/p>\n<p>  \u0418 \u0432\u0442\u043e\u0440\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u044d\u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c [ &#8216;\u0438\u043c\u044f_\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430&#8217;, \u00ab\u0442\u0438\u043f_\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u00bb, \u00ab\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u00bb] \u0442\u043e\u0433\u0434\u0430 \u043d\u0430\u043c \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0432 html \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435, \u0442. \u043a. \u043c\u044b \u0435\u0433\u043e \u0438\u0449\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430, \u0435\u0441\u043b\u0438 \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043f\u0443\u0441\u0442\u044b\u043c &quot;&quot; \u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u043e \u0442\u0435\u0433\u0443 \u0441\u0430\u043c\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043b\u0438\u0431\u043e \u0442\u0435\u0433\u0443 \u0441\u0430\u043c\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u2014 \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 arrayProps.<\/p>\n<p>  \u0418\u0437\u043c\u0435\u043d\u0438\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"javascript\">var State = { \t   categories: {     container: &quot;category&quot;,      \/\/\u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f &quot;emiter-click-on-category&quot; \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0432\u0442\u043e\u0440\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c     props: [ &quot;data&quot;, &quot;click&quot;, 'class', &quot;title&quot;,  ['listner_click_on_category', &quot;emiter-click-on-category&quot;, &quot;&quot;]],     methods: { \tclick: function(){ \t\t\t\t\t\t\t\t \t   event.preventDefault(); \t   var categoryId = this.parent.props.data.getProp(); \t\t \t   \/\/\u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 &quot;emiter-click-on-category&quot;        \/\/ \u043f\u0435\u0440\u0435\u0434\u0430\u0432 \u0432 \u043d\u0435\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 data \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0431\u044b\u043b \u043a\u043b\u0438\u043a \t    this.rootLink.eventProps[&quot;emiter-click-on-category&quot;].setEventProp(categoryId); \t\t\t\t \t    \/\/\u0441\u043e\u0437\u0434\u0430\u0435\u043c url \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 data \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \t    \/\/\u043e\u0434\u0438\u043d \u0434\u043b\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u0438 - historyUrl \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043d\u0430\u043c \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c,            \/\/ \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0442\u043e\u0432\u0430\u0440\u0430 \u043d\u0430 \u0430\u0434\u0440\u0435\u0441 \/category\/:idCategory\/json \t                var historyUrl = &quot;\/category\/&quot;+categoryId; \t    var url = historyUrl+&quot;\/json&quot;;\t\t\t\t                        this.rootLink.stateMethods.load_carts(url, this); \/\/\u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 load_carts \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0432 \u043d\u0435\u0433\u043e url  \u0438 this \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u043e\u0442\u0435\u0440\u044f\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442  \t\t\t\t\t\t\t\t \t}, \tlistner_click_on_category: function(){  \t\/\/\u0432 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 \u0432\u044b\u0448\u0435 - \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u043a\u043b\u0430\u0441\u0441 &quot;active&quot; \u0441\u043e \u0432\u0441\u0435\u0445 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 \t\/\/ \u0437\u0430\u0442\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u043d\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 data \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0442         \/\/ \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 &quot;emiter-click-on-category&quot; \t\t\t\t \t\tthis.parent.props.class.removeProp(&quot;active&quot;); \t\t\t\t \t\tif(this.parent.props.data.getProp() == this.emiter.prop){\t\t\t\t\t \t\t  this.parent.props.class.setProp(&quot;active&quot;); \t\t}\t\t\t\t \t},       }\t\t     }, <\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">    carts: { \tcontainer: &quot;cart&quot;, \tprops: [ ], \tmethods: { \t\t\t \t}\t\t      },      stateProperties:{ \/\/\u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043e\u0431\u0449\u0438\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\t\t \tcarts: [],\t\t      },      stateMethods: { \tfetchCategoryCarts: function(url, callb){  \t\/\/ \u043e\u0431\u0449\u0438\u0439  \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043a\u0430\u043a\u043e\u0433\u043e \u043b\u0438\u0431\u043e \u0430\u0434\u0440\u0435\u0441\u0430 get \u0437\u0430\u043f\u0440\u043e\u0441\u043c,         \/\/\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u0445 \u0430\u0434\u0440\u0435\u0441 - url \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 callb,       \/\/ \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043e\u043d \u043f\u0435\u0440\u0435\u0434\u0430\u0441\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435  \t\t\t\t\t \t   fetch(url).then((response) =&gt; { \t\tif(response.ok) { \t\t   return response.json(); \t\t}\t           \t\t  throw new Error('Network response was not ok'); \t    }).then((json) =&gt; { \t\tcallb(json);              }).catch((error) =&gt; { \t\t console.log(error); \t     });\t \t},  \tload_carts:  function(url, context ){  \t\/\/\u043c\u0435\u0442\u043e\u0434 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 fetchCategoryCarts \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0432 \u043d\u0435\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430  \t\/\/ \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e .carts \t\/\/\u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 &quot;emiter-load-carts&quot;, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u0435\u0449\u0435 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u043b\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u0437\u0430\u043a\u043e\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e  \t   context.rootLink.stateMethods.fetchCategoryCarts(url, function(data){ \t\t\t\t\t \t       context.rootLink.stateProperties.carts = data; \t\t\t\t\t \t       console.log(data) \t      \/\/context.rootLink.eventProps[&quot;emiter-load-carts&quot;].setEventProp(data);\t\t\t\t \t\t\t\t\t \t    }); \t},       },      eventEmiters: {\/\/\u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c\u0438 \t\t         [&quot;emiter-click-on-category&quot;] : { \/\/\u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 &quot;emiter-click-on-category&quot;\t\t\t\t \t\tprop: [],\t\t\t\t \t   },       }\t\t } \t\t <\/code><\/pre>\n<p>  \u0418\u0442\u0430\u043a \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0443 \u043d\u0430\u0441 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043e\u0431\u044b\u0442\u0438\u044f <b>\u00abemiter-click-on-category\u00bb<\/b>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 <b>load_carts<\/b> \u043e\u0431\u044a\u0435\u043a\u0442\u0430 stateMethods, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <b>carts<\/b> \u043e\u0431\u044a\u0435\u043a\u0442\u0430 stateProperties \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c.<\/p>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 <b>cart<\/b> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <b>carts<\/b>:<\/p>\n<p>  * <b>\u00abdata\u00bb<\/b> \u2014 \u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 &#8216;\/cart\/:idCart&#8217; ( &quot;\/cart\/{{cart._id}}&quot; ), <br \/>  * <b>\u00abtitle_category\u00bb<\/b> \u2014 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 {{cart.titleCategory}},<br \/>  * <b>\u00abcost\u00bb<\/b> \u2014 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0442\u043e\u0432\u0430\u0440\u0430 {{cart.cost}},<br \/>  * <b>&#8216;title&#8217;<\/b> \u2014 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0442\u0435\u043a\u0441\u0442\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 ( {{cart.title}} ),<br \/>  * <b>\u00absrc_img\u00bb<\/b> \u2014 \u0430\u0434\u0440\u0435\u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 &quot;\/static\/upload\/{{cart.image}}&quot;,<br \/>  * <b>\u00abclick\u00bb<\/b> \u2014 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435 \u0442\u043e\u0432\u0430\u0440\u0430,<\/p>\n<p>  \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u2014 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 <b>carts<\/b> \u2014 <b>&#8216;listener_load_carts&#8217;<\/b> \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <b>\u00abemiter-load-carts\u00bb<\/b> \u2014 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0442\u043e\u0432\u0430\u0440\u0430 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u043f\u0440\u0438 \u0435\u0433\u043e \u043d\u0430\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0438, \u043c\u044b \u0435\u0433\u043e \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 load_carts \u043e\u0431\u044a\u0435\u043a\u0442\u0430 stateMethods.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 <b>carts<\/b> \u0438 \u0432\u0441\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443 <b>cart<\/b> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 carts:<\/p>\n<pre><code class=\"javascript\"> carts: {     \/\/\u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e listener_load_carts \u0434\u043b\u044f \u043c\u0430\u0441\u0441\u0438\u0432\u0430 carts      arrayProps: [ ['listener_load_carts', &quot;emiter-load-carts&quot;, &quot;&quot;] ],      arrayMethods: { \t\t         listener_load_carts: function(){ \/\/\u0441\u043b\u0443\u0448\u0430\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 &quot;emiter-load-carts&quot;  \t     this.parent.removeAll(); \/\/\u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0432 \u0441\u0430\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0438 \u043e\u0447\u0438\u0449\u0430\u0435\u043c \u0435\u0433\u043e                var carts = this.emiter.prop; \/\/\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0441\u043e\u0431\u044b\u0442\u0438\u044f &quot;emiter-load-carts&quot; \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u0432\u044b\u0437\u043e\u0432\u0435\u043c \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 load_carts \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0442\u043e\u0432\u0430\u0440\u0430  \t     for(var i=0; i&lt;carts.length; i++){ \t\t \/\/\u0432 \u0446\u0438\u043a\u043b\u0435 \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u0442\u043e\u0432\u0430\u0440\u0430\t \t\t\t\t\t\t \t\t var cart = carts[i]; \t\t\t\t\t\t \t\t   var props = { \/\/\u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 cart \t\t\t\t\t\t\t \t\t\ttitle: cart.title, \t\t\ttitle_category: cart.titleCategory, \t\t\tcost: cart.cost, \t\t\tsrc_img: '\/static\/upload\/'+cart.image, \t\t\tdata: &quot;\/cart\/&quot;+cart._id \t\t   } \t\t\t\t\t\t \t\tthis.parent.add(props);                  \/\/\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432, \u043f\u0435\u0440\u0435\u0434\u0430\u0432 \u0432 \u043d\u0435\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \t    } \t}     },     container: &quot;cart&quot;,     \/\/\u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432\u0441\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 cart \tprops: ['title', &quot;title_category&quot;,  &quot;cost&quot;, &quot;click&quot;, &quot;src_img&quot;, &quot;data&quot;  ], \tmethods: { \t     click: function(){ \/\/\u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043b\u0438\u043a\u043e\u0432 \u043f\u043e \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435 \u0442\u043e\u0432\u0430\u0440\u0430,  \t\t\t\t\/\/\u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u0442 url \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \t\t\t\t \t\t event.preventDefault();\t\t\t\t \t\t var url = this.parent.props.data.getProp(); \t\t  console.log(url);\t\t\t\t \t     } \t  }\t\t  }, <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0441\u043a\u043e\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0437\u043e\u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u00abemiter-load-carts\u00bb \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 load_carts \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442 eventEmiters:<\/p>\n<pre><code class=\"javascript\">load_carts:  function(url, context ){   \t   context.rootLink.stateMethods.fetchCategoryCarts(url, function(data){\t\t\t\t \t       context.rootLink.stateProperties.carts = data; \t\t\t\t\t \t        console.log(data) \t        context.rootLink.eventProps[&quot;emiter-load-carts&quot;].setEventProp(data);\t\t\t\t \t\t         \/\/\u0440\u0430\u0441\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0432\u044b\u0437\u043e\u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u044f &quot;emiter-load-carts&quot;  \t\t        \/\/\u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0432 \u043d\u0435\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432 carts \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430,                \/\/ \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u044b\u0437\u0432\u0430\u0432 this.emiter.prop \t \t    }); \t},     \/\/\/*********************************************    eventEmiters: {            \/\/ ------------------------------\t\t  \t   [&quot;emiter-load-carts&quot;]: { \/\/\u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \t\t\t \t\t\tprop: &quot;&quot;, \t     }       }\t   <\/code><\/pre>\n<p>  \u041d\u0443 \u0432\u043e\u0442 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0443 \u043d\u0430\u0441 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 <b>carts<\/b>, \u043e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435 \u0442\u043e\u0432\u0430\u0440\u0430 \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043a\u0440\u043e\u043c\u0435 \u0432\u044b\u0432\u043e\u0434\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0430\u0434\u0440\u0435\u0441\u0430 \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c\u043e\u0439 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 &#8216;\/cart\/:idCart&#8217; <\/p>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 \u0442\u043e\u0432\u0430\u0440\u0430 <b>cart_single<\/b>, \u043d\u043e \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 htmlix:<\/p>\n<p>  \u0418\u0442\u0430\u043a \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0438 \u0441 \u0430\u0434\u0440\u0435\u0441\u0430 &quot;\/&quot; \u043b\u0438\u0431\u043e &quot;\/category\/:idCategory&quot;, \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u0440\u0438\u0441\u044b\u043b\u0430\u0435\u0442 \u043d\u0430\u043c html \u043a\u043e\u0434 \u0434\u0432\u0443\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0442\u043e\u0447\u043d\u0435\u0435 \u0442\u0440\u0435\u0445, \u0435\u0449\u0435 \u00abmenu\u00bb, \u043d\u043e \u0435\u0433\u043e \u043c\u044b \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c html \u043a\u043e\u0434 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 carts \u0438 categories, \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u0434\u0430 htmlix \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u043e \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 cart_single \u043d\u0430\u043c \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0434\u0430\u043d\u043d\u044b\u043c \u0430\u0434\u0440\u0435\u0441\u0430\u043c, \u0442.\u043a. \u0435\u0433\u043e \u0442\u0430\u043c \u043d\u0435\u0442. \u041a\u0430\u043a \u0436\u0435 \u043d\u0430\u043c \u0435\u0433\u043e \u00ab\u0434\u043e\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u00bb? \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 cart_single \u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u043c\u0435\u0449\u0430\u044f\u0435\u043c \u0435\u0433\u043e \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u00abfetchComponents\u00bb \u0430 \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 `stateSettings.templatePath` \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0430\u0434\u0440\u0435\u0441 \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0434\u0430 \u0438 \u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0449\u0435 \u043f\u043e\u044f\u0432\u044f\u0442\u0441\u044f. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0441\u043b\u0430\u043b \u0441\u0435\u0440\u0432\u0435\u0440 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 html, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u0441\u043b\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 stateSettings.templatePath \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0435\u0441\u044f \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 fetchComponents.<\/p>\n<p>  \u0422\u0430\u043a \u0431\u044b \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0435\u0441\u043b\u0438 \u0431\u044b \u0432\u0445\u043e\u0434 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0443 \u043d\u0430\u0441 \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u044b \u0431\u044b\u043b \u0441 \u0430\u0434\u0440\u0435\u0441\u043e\u0432, &quot;\/&quot; \u043b\u0438\u0431\u043e &quot;\/category\/:idCategory&quot;, \u0430 \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u0442\u043e\u043c \u043f\u0435\u0440\u0432\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043c \u0441 \u0430\u0434\u0440\u0435\u0441\u0430 &quot;\/cart\/:idCart&quot;? \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u0434\u0430\u0441\u0442 \u043e\u0448\u0438\u0431\u043a\u0443, \u0447\u0442\u043e \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0439\u0442\u0438 \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u043c\u0430\u0441\u0441\u0438\u0432\u0430 carts, \u0442\u0430\u043a \u043a\u0430\u043a \u0442\u0435\u043f\u0435\u0440\u044c \u0435\u0433\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u0430\u0434\u0440\u0435\u0441\u0443 \u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c \u0442\u0435\u043f\u0435\u0440\u044c carts \u0432 \u043e\u0431\u044a\u0435\u043a\u0442 \u00abfetchComponents\u00bb a single_cart \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442 \u043e\u0442\u0442\u0443\u0434\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u044c, \u0442.\u043a. \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0435\u0440\u0432\u044b\u043c \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c categories, \u0447\u0442\u043e \u0436\u0435 \u0434\u0435\u043b\u0430\u0442\u044c?<\/p>\n<p>  \u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c HTMLixRouter(), \u043e\u043d \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u043a\u0430\u043a\u043e\u0439 \u0441\u0435\u0439\u0447\u0430\u0441 \u0430\u0434\u0440\u0435\u0441 url \u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u0441 \u0442\u0435\u043c\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0435\u043c\u0443 \u0443\u043a\u0430\u0436\u0435\u043c, \u0438 \u0437\u0430\u0442\u0435\u043c \u0441\u0430\u043c \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442 \u0442\u0435 \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435\u0442 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435, \u0432 \u043e\u0431\u044a\u0435\u043a\u0442 \u00abfetchComponents\u00bb, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u0438\u0437\u0431\u0435\u0436\u0438\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f, \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 url \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430.<\/p>\n<p>  \u0418\u0442\u0430\u043a \u0443 \u043d\u0430\u0441 \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0442\u0440\u0438 \u0430\u0434\u0440\u0435\u0441\u0430 &quot;\/&quot; ,&quot;\/category\/:idCategory&quot; \u0438 &quot;\/cart\/:idCart&quot;, \u0442\u0440\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 carts, categories \u0438 cart_single. \u041d\u0430 \u043f\u0435\u0440\u0432\u044b\u0445 \u0434\u0432\u0443\u0445 \u0430\u0434\u0440\u0435\u0441\u0430\u0445 \u0443 \u043d\u0430\u0441 \u043f\u0435\u0440\u0432\u044b\u043c\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b carts \u0438 categories, \u0430 \u043d\u0430 \u0430\u0434\u0440\u0435\u0441\u0435 &quot;\/cart\/:idCart&quot; \u2014 categories \u0438 cart_single. <\/p>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u043b\u044f \u043d\u0438\u0445 \u043e\u0431\u044a\u0435\u043a\u0442 routes \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0435\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043e\u0442 \u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f State \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e:<\/p>\n<pre><code class=\"javascript\">var routes = { \t     [&quot;\/&quot;]: {\t\t         first: [&quot;categories&quot;, 'carts'],  \/\/\/ \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0441\u0442\u044c \u0432 html \u0444\u0430\u0439\u043b\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u044d\u0442\u043e\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0435, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b \u0441 \u0448\u0430\u0431\u043b\u043e\u043d\u0430, \u0432 fetch \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e  \troutComponent: {                  router_carts: &quot;carts&quot;, \/\/\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u0440\u043e\u0443\u0442\u0443            },  \t\ttemplatePath: &quot;\/static\/templates\/index.html&quot; \/\/ \u043f\u0430\u043f\u043a\u0430 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432      },\t\t\t      [&quot;\/category\/:idCategory&quot;]: {  \/\/\u0437\u043d\u0430\u043a `:` \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u0438 \u0441 \u043d\u0438\u043c \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u043d\u0438\u0435 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0433\u043e \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 url, \u0435\u0449\u0435 \u0435\u0441\u0442\u044c \u0437\u043d\u0430\u043a `*` \u0432 \u043a\u043e\u043d\u0446\u0435 \u0441\u043b\u043e\u0432\u0430 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 category1, category2, \u0438 \u0442.\u0434 \u0442\u043e \u0441\u0442\u0430\u0432\u0438\u043c \u0437\u0432\u0435\u0437\u0434\u043e\u0447\u043a\u0443 \u0432 \u043a\u043e\u043d\u0446\u0435 category*. \t\t \t first: [&quot;categories&quot;, 'carts', &quot;menu&quot;, &quot;home_page&quot;],   \t routComponent: {\t\t\t \t         router_carts: &quot;carts&quot;,\t\t\t \t\t},  \t  templatePath: &quot;\/static\/templates\/index.html&quot;  \t},\t      [&quot;\/cart\/:idCart&quot;]: {  \t\t \t  first: [&quot;categories&quot;, 'cart_single'],   \t  routComponent: { \t       router_carts: &quot;cart_single&quot;,\t\t\t \t   }, \t   templatePath: &quot;\/static\/templates\/index.html&quot;       }, }  <\/code><\/pre>\n<p>  \u0418\u0442\u0430\u043a \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0442\u0440\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \u0434\u043b\u044f \u0440\u043e\u0443\u0442\u0435\u0440\u0430, \u0437\u0434\u0435\u0441\u044c <b>router_carts<\/b> \u044d\u0442\u043e div \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u00abcarts\u00bb \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0445 \u0434\u0432\u0443\u0445 \u0430\u0434\u0440\u0435\u0441\u0430\u0445, \u0430 \u043d\u0430 \u0442\u0440\u0435\u0442\u044c\u0435\u043c \u00abcart_single\u00bb, \u0432 html (\u0432 \u0444\u0430\u0439\u043b\u0430\u0445 &#8216;\/views\/index.twig&#8217; \u0438 &#8216;\/views\/cart.twig&#8217;) \u043e\u043d \u0443\u043a\u0430\u0437\u0430\u043d \u043a\u0430\u043a <b>data-router_carts=\u00abrouter\u00bb<\/b>. <\/p>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f <b>cart_single<\/b> \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438:<br \/>  * <b>\u00abvariant_tmpl\u00bb<\/b> \u2014 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0441 \u0442\u0438\u043f\u043e\u043c \u00abrender-variant\u00bb \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 (cart_variant_option.twig \u0438\u043b\u0438 cart_variant_radio.twig \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438) \u0432 html \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u2014 <b>data-cart_single-variant_tmpl-\u00abrender-variant\u00bb<\/b>,<br \/>  * <b>&#8216;title&#8217;<\/b> \u2014 \u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0442\u043e\u0432\u0430\u0440\u0430 &#8216;data-cart_single-title=\u00abtext\u00bb&#8217;, <br \/>  * <b>\u00abtitle_category\u00bb<\/b> \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438,<br \/>  * <b>\u00abmanufacture\u00bb<\/b> \u2014 \u043f\u0440\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c,<br \/>  * <b>\u00abcost\u00bb<\/b> \u2014 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c,<br \/>  * <b>\u00abdescription\u00bb<\/b> \u2014 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435,<br \/>  * <b>\u00abcost_btn\u00bb<\/b> \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0432 \u043a\u043d\u043e\u043f\u043a\u0435,<br \/>  * <b>\u00absrc_img\u00bb<\/b> \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 data-cart_single-src_img=\u00absr\u0441\u00bb, <br \/>  * <b>\u00abdata\u00bb<\/b> \u2014 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0435 id \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f url \u2014 data-cart_single-data=&quot;{{ cart.category }}&quot;,<br \/>  * <b>\u00abclick_category\u00bb<\/b> \u2014 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0432 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435 \u0442\u043e\u0432\u0430\u0440\u0430,<br \/>  * <b> \u00ablistner_click_on_cart\u00bb<\/b> \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u2014 \u00abemiter-click-on-cart\u00bb, <\/p>\n<pre><code class=\"javascript\">cart_single: {    container: &quot;cart_single&quot;,    \/\/\u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u0437\u0430\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u043c &quot;variant_tmpl&quot; \u0442.\u043a. \u043c\u044b \u0435\u0449\u0435 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u043c\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0434\u043b\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438    props: [\/*&quot;variant_tmpl&quot;,*\/'title', &quot;title_category&quot;, &quot;manufacture&quot;, &quot;cost&quot;, &quot;description&quot;, &quot;cost_btn&quot;, &quot;src_img&quot;, [&quot;listner_click_on_cart&quot;, &quot;emiter-click-on-cart&quot;, &quot;&quot;], &quot;click_category&quot;, &quot;data&quot;],    methods: { \t\t\t \tlistner_click_on_cart: function(){ \t\t\t\t \t\tvar index = this.emiter.getEventProp();                   \/\/\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u043d\u0434\u0435\u043a\u0441 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043a\u043b\u0438\u043a\u043d\u0443\u043b\u0438 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 carts  \t\tvar cart = this.rootLink.stateProperties.carts[index];                 \/\/\u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u0437 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0445 \u0440\u0430\u043d\u043d\u0435\u0435 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u043d\u0443\u0436\u043d\u0443\u044e \u043d\u0430\u043c \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430  \t\t\t\t \t\tvar props = { \t\t\t\t\t\t\t \t\t   title: cart.title, \t\t   title_category: cart.titleCategory, \t\t   cost: cart.cost, \t\t   src_img: '\/static\/upload\/'+cart.image, \t\t   data: cart.category, \t\t   description:  cart.description, \t\t   cost_btn: cart.cost, \t\t   manufacture: cart.manufacture, \t\t  \/\/ variant_tmpl: cart.variant_tmpl, \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u0437\u0430\u043a\u043e\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0430, \u0442.\u043a. \u043c\u044b \u0435\u0449\u0435 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u043b\u0438  \u0434\u043b\u044f \u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \t\t\t\t\t\t\t \t\t } \t\t\t\t\t\t \t\tthis.parent.setAllProps(props);  \t        \/\/\u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0440\u0430\u0437\u0443 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 setAllProps(props);\t\t\t\t\t \t}, \tclick_category: function(){ \t   event.preventDefault();             \/\/\u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435, \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u043c id \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c            console.log(this.parent.props.data)\t\t\t\t \t }\t       }, },  <\/code><\/pre>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043c\u0435\u0442\u043e\u0434 <b>click<\/b> \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 &#8216;cart&#8217; \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <b>carts<\/b> \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u0434<\/p>\n<pre><code class=\"javascript\">click: function(){   \t\t\t\t                   event.preventDefault();\t\t\t\t    var url = this.parent.props.data.getProp(); \/\/\u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 data \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 cart \u0443 \u043d\u0430\u0441 url \u043a\u0440\u0442\u043e\u0447\u043a\u0438 \u0442\u043e\u0432\u0430\u0440\u0430.       \/\/\u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432\u044b\u0437\u043e\u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u044f  &quot;emiter-click-on-cart&quot;  \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u0441\u043b\u0443\u0448\u0430\u0435\u043c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 single_cart \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u0441\u0435\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432     \/\/\u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0432 \u043d\u0435\u0433\u043e \u0438\u043d\u0434\u0435\u043a\u0441 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043a\u043b\u0438\u043a\u043d\u0443\u043b\u0438     this.rootLink.eventProps[&quot;emiter-click-on-cart&quot;].setEventProp(this.parent.index);        \/\/\u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 setRout \u043f\u0435\u0440\u0435\u0434\u0430\u0432 \u0432 \u043d\u0435\u0433\u043e \u043d\u043e\u0432\u044b\u0439 url,    \/\/ \u0447\u0442\u043e\u0431\u044b \u0440\u043e\u0443\u0442\u0435\u0440 \u043f\u043e\u043c\u0435\u043d\u044f\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 carts \u043d\u0430 cart_single \u0432 div \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 data-router_carts=&quot;router&quot; \u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u043b \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0432 \u0431\u0440\u043e\u0443\u0437\u0435\u0440\u0435       this.rootLink.router.setRout(url);\t\t\t\t }  <\/code><\/pre>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u00abemiter-click-on-cart\u00bb \u0432 \u043e\u0431\u044a\u0435\u043a\u0442 eventEmiters<\/p>\n<pre><code class=\"javascript\">     eventEmiters: { \t  \t \t [&quot;emiter-click-on-cart&quot;]: { \t\t\t \t\t\tprop: &quot;&quot;, \t\t},\t <\/code><\/pre>\n<p>  \u0410 \u0442\u0430\u043a\u0436\u0435 \u0432 \u043a\u043e\u043d\u0435\u0446 \u043c\u0435\u0442\u043e\u0434\u0430 click \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 catgory \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 categories:<\/p>\n<pre><code class=\"javascript\">click: function() {          \/\/\u043c\u0435\u0442\u043e\u0434 setRout \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 url \u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u0441 \u043a\u0430\u0440\u0442\u043e\u0439 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 routes     \/\/\u0438 \u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u0430\u0434\u0440\u0435\u0441\u0435 \u043c\u0435\u043d\u044f\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 div \u0442\u0435\u0433\u0435  `data-router_carts=&quot;router&quot;` \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044f carts \u0438\u043b\u0438 single_cart      \/* ............ \u043a\u043e\u043d\u0435\u0446 \u043c\u0435\u0442\u043e\u0434\u0430 ............*\/      this.rootLink.router.setRout(historyUrl);     } <\/code><\/pre>\n<p>  \u0418 \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043f\u043e\u0441\u043e\u0431 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043d\u0430\u0448\u0438 \u0440\u043e\u0443\u0442\u044b routes \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f State \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e HTMLixRouter().<\/p>\n<pre><code class=\"javascript\">window.onload = function(){  \t\/\/\/\u0441\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440  HTMLix \tvar HM = HTMLixRouter(State, routes); \t\t         var url = window.location.pathname; \t\t \t    if(window.location.pathname == &quot;\/&quot;){ \t\t\t \t\turl = url+&quot;json&quot;; \t\t\t \t    }else{ \t\t\t \t\t url = url + &quot;\/json&quot;; \t    }\t                      \/\/\u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u0442\u043e\u0432\u0430\u0440\u0430 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\t \t  HM.stateMethods.fetchCategoryCarts(url, function(arr){  HM.stateProperties.carts = arr; }); \t  console.log(HM); } <\/code><\/pre>\n<p>  \u041d\u0443 \u0432\u043e\u0442 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0434\u043b\u044f \u0442\u0440\u0435\u0445 \u0430\u0434\u0440\u0435\u0441\u043e\u0432 url, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u043c\u0435\u043d\u044b \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0434\u043b\u044f single_cart \u0438 \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0438\u0437 single_cart. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u00ab\u043f\u043e\u043a\u043b\u0438\u043a\u0430\u0435\u043c\u00bb \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0447\u0442\u043e \u0432\u0441\u0435 \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u0432\u0430 \u043d\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2014 \u0434\u043b\u044f \u0441\u043c\u0435\u043d\u044b \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 single cart:<\/p>\n<pre><code class=\"javascript\">\tcart_variant_option: { \t\tcontainer: &quot;cart_variant_option&quot;, \/\/ views\/twig_templates\/cart_variant_option.twig =&gt;  data-cart_variant_option=&quot;container&quot;  \t\tprops: [&quot;click&quot;, &quot;select&quot;],  \/\/data-cart_variant_option-select=&quot;select&quot; , data-cart_variant_option-click=&quot;click&quot; \t\tmethods: {  \t\t\t\tclick: function(){ \t\t\t\t\t \t\t\t\t\tconsole.log(this.parent.props.select.getProp()); \t\t\t\t} \t\t} \t\t \t}, \tcart_variant_radio: { \t\tselector: &quot;div:last-of-type&quot;, \t\tcontainer: &quot;cart_variant_radio_cont&quot;, \t\tprops: [&quot;click&quot;, &quot;radio&quot;], \t\tmethods: {  \t\t\t \t\t\t\tclick: function(){ \t\t\t\t\t \t\t\t\t\tconsole.log(this.parent.index+&quot; --- &quot;+this.parent.props.radio.getProp()); \t\t\t\t} \t\t\t\t \t\t} \t\t \t},  <\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0440\u0430\u0441\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u00abvariant_tmpl\u00bb \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u2014 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 cart_single<\/p>\n<pre><code class=\"javascript\">cart_single: {    container: &quot;cart_single&quot;,    props: [&quot;variant_tmpl&quot; \/*...........................*\/],  <\/code><\/pre>\n<p>  \u0418 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 listner_click_on_cart:<\/p>\n<pre><code class=\"javascript\">\t\tvar props = { \t\t\t\t\t\t\t \t\t   title: cart.title, \t\t   title_category: cart.titleCategory, \t\t   cost: cart.cost, \t\t   src_img: '\/static\/upload\/'+cart.image, \t\t   data: cart.category, \t\t   description:  cart.description, \t\t   cost_btn: cart.cost, \t\t   manufacture: cart.manufacture, \t\t   variant_tmpl: cart.variant_tmpl, \/\/\u0440\u0430\u0441\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \t\t\t\t\t\t\t \t\t }  <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 \u0442\u043e\u0432\u0430\u0440\u0430, \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u0445 \u0442\u043e\u0432\u0430\u0440\u0430 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d, \u0430 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <b>variant_tmpl<\/b> \u043e\u0434\u0438\u043d \u0438\u0437 \u0434\u0432\u0443\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 cart_variant_radio \u2014 \u043d\u043e\u0443\u0442\u0431\u0443\u043a\u0438 \u0438 \u0442\u0435\u043b\u0435\u0432\u0438\u0437\u043e\u0440\u044b, cart_variant_option \u2014 \u0444\u043e\u0442\u043e\u0430\u043f\u043f\u0430\u0440\u0430\u0442\u044b.<\/p>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u0434 \u0432 \u043c\u0435\u0442\u043e\u0434 <b>click_category<\/b> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u2014 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 cart_single \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0438\u0437 \u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0442\u043e\u0432\u0430\u0440\u0430 \u0443 \u043d\u0430\u0441 \u0442\u0430\u043a\u0436\u0435 \u043c\u0435\u043d\u044f\u043b\u0430\u0441\u044c \u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u043b\u0441\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u044b\u0439 \u0432 \u0440\u043e\u0443\u0442\u0435\u0440\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u0434 \u0438\u0437 \u043c\u0435\u0442\u043e\u0434\u0430 click \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 category \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 categories.<\/p>\n<pre><code class=\"javascript\">click_category: function(){ \t\t\t\t\t\t\t\t \t   event.preventDefault();\t\t\t\t \t    this.rootLink.eventProps[&quot;emiter-click-on-category&quot;].setEventProp(this.parent.props.data.getProp()); \t                var historyUrl = &quot;\/category\/&quot;+this.parent.props.data.getProp(); \t    var url = historyUrl+&quot;\/json&quot;;\t\t\t\t                        this.rootLink.stateMethods.load_carts(url, this); \t   this.rootLink.router.setRout(historyUrl);\t\t\t\t\t\t\t\t }, <\/code><\/pre>\n<p>  \u0418\u0442\u0430\u043a \u043c\u0435\u0442\u043e\u0434 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u043e \u043f\u043b\u043e\u0445\u043e \u0442\u043e \u0447\u0442\u043e \u043c\u044b \u043f\u0440\u043e\u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u043a\u043e\u0434, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043c \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u0432 \u043c\u0435\u0442\u043e\u0434 click_on_category \u0432 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043e\u0431\u0449\u0438\u043c\u0438 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f stateMethods, \u0438 \u043f\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u0432 \u043d\u0435\u0433\u043e context \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c, \u0430 \u0432\u0442\u043e\u0440\u044b\u043c url \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u043e\u0442\u0438\u043c \u0441\u043c\u0435\u043d\u0438\u0442\u044c:<\/p>\n<pre><code class=\"javascript\">click_on_category: function(context, event){ \t\t\t\t \tevent.preventDefault();\t\t\t\t \t\t\t\t \tvar historyUrl = &quot;\/category\/&quot;+context.parent.props.data.getProp(); \tvar url = historyUrl+&quot;\/json&quot;; \t\t\t\t \tcontext.rootLink.eventProps[&quot;emiter-click-on-category&quot;].setEventProp(context.parent.props.data.getProp()); \t\t\t\t \tcontext.rootLink.router.setRout(historyUrl); \t\t\t\tconsole.log(url); \tcontext.rootLink.stateMethods.load_carts(url, context); \t\t\t\t }, <\/code><\/pre>\n<p>  \u0410 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <b>click_category<\/b> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u2014 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 cart_single \u0438 \u043c\u0435\u0442\u043e\u0434\u0435 <b>click<\/b> \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 category \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 categories \u0432\u044b\u0437\u043e\u0432\u0435\u043c \u043e\u0431\u0449\u0438\u0439 \u043c\u0435\u0442\u043e\u0434: <\/p>\n<pre><code class=\"javascript\">\/* *\/ : function(){       this.rootLink.stateMethods.click_on_category(this, event); } \t <\/code><\/pre>\n<p>  \u0418\u0442\u0430\u043a \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043f\u0435\u0440\u0432\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u043c\u0430\u0433\u0430\u0437\u0438\u043d\u0430 \u0434\u043b\u044f \u0442\u0440\u0435\u0445 \u0430\u0434\u0440\u0435\u0441\u043e\u0432 url, \u043f\u043e\u043b\u043d\u044b\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043e \u044d\u0442\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u043d\u0438\u0436\u0435, \u043d\u0430 \u044d\u0442\u043e\u043c \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u0432\u0441\u0435.<\/p>\n<pre><code class=\"javascript\">var State = { \t   categories: {     container: &quot;category&quot;,      props: [ &quot;data&quot;, &quot;click&quot;, 'class', &quot;title&quot;,  ['listner_click_on_category', &quot;emiter-click-on-category&quot;, &quot;&quot;]],     methods: { \tclick: function(){ \t\t \t\t\tthis.rootLink.stateMethods.click_on_category(this, event); \t\t\t\t\t\t\t\t\t\t\t\t \t}, \tlistner_click_on_category: function(){  \t \t\tthis.parent.props.class.removeProp(&quot;active&quot;); \t\t\t\t \t\tif(this.parent.props.data.getProp() == this.emiter.prop){\t\t\t\t\t \t\t  this.parent.props.class.setProp(&quot;active&quot;); \t\t}\t\t\t\t \t},       }\t\t     },     carts: { \t\tarrayProps: [ ['listener_load_carts', &quot;emiter-load-carts&quot;, &quot;&quot;] ], \t\tarrayMethods: {  \t\t \t\t  listener_load_carts: function(){  \t\t\t\t \t\t\t\t\tthis.parent.removeAll(); \t\t\t \t\t\t\t\tfor(var i=0; i&lt;this.emiter.prop.length; i++){ \t\t\t\t\t\/\/\u0432 \u0446\u0438\u043a\u043b\u0435 \u043f\u0435\u0440\u0435\u0431\u0435\u0440\u0430\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u0442\u043e\u0432\u0430\u0440\u0430\t \t\t\t\t\t\t \t\t\t\t\t\tvar prop = this.emiter.prop[i]; \t\t\t\t\t\t \t\t\t\t\t\tvar props = {  \t\t\t\t\t\t\t \t\t\t\t\t\t\ttitle: prop.title, \t\t\t\t\t\t\ttitle_category: prop.titleCategory, \t\t\t\t\t\t\tcost: prop.cost, \t\t\t\t\t\t\tsrc_img: '\/static\/upload\/'+prop.image, \t\t\t\t\t\t\tdata: &quot;\/cart\/&quot;+prop._id \t\t\t\t\t\t} \t\t\t\t\t\t \t\t\t\t\t\tthis.parent.add(props); \/\/\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043f\u0435\u0440\u0435\u0434\u0430\u0432 \u0432 \u043d\u0435\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \t\t\t\t\t} \t\t\t} \t\t}, \t\tcontainer: &quot;cart&quot;, \t\t\/\/\u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432\u0441\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 cart \t\tprops: ['title', &quot;title_category&quot;,  &quot;cost&quot;, &quot;click&quot;, &quot;src_img&quot;, &quot;data&quot;  ], \t\tmethods: { \t\t\t\tclick: function(){ \/\/\u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043b\u0438\u043a\u043e\u0432 \u043f\u043e \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435 \u0442\u043e\u0432\u0430\u0440\u0430, \t\t\t\t            \t\t\t\t \t\t\t\t\tevent.preventDefault(); \t\t\t\t \t\t\t\t\tvar url = this.parent.props.data.getProp();  \t\t\t\t\tthis.rootLink.router.setRout(url); \t\t\t\t    this.rootLink.eventProps[&quot;emiter-click-on-cart&quot;].setEventProp(this.parent.index); \t\t\t\t \t\t\t} \t    }\t\t      }, cart_single: {    container: &quot;cart_single&quot;,    props: [&quot;variant_tmpl&quot;,'title', &quot;title_category&quot;, &quot;manufacture&quot;, &quot;cost&quot;, &quot;description&quot;, &quot;cost_btn&quot;, &quot;src_img&quot;, [&quot;listner_click_on_cart&quot;, &quot;emiter-click-on-cart&quot;, &quot;&quot;], &quot;click_category&quot;, &quot;data&quot;],    methods: { \t\t\t \tlistner_click_on_cart: function(){ \t\t\t\t \t\tvar index = this.emiter.getEventProp();                   \/\/\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u043d\u0434\u0435\u043a\u0441 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043a\u043b\u0438\u043a\u043d\u0443\u043b\u0438 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 carts  \t\tvar cart = this.rootLink.stateProperties.carts[index];                 \/\/\u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u0437 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0445 \u0440\u0430\u043d\u043d\u0435\u0435 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u043d\u0443\u0436\u043d\u0443\u044e \u043d\u0430\u043c \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430  \t\t\t\t \t\tvar props = { \t\t\t\t\t\t\t \t\t   title: cart.title, \t\t   title_category: cart.titleCategory, \t\t   cost: cart.cost, \t\t   src_img: '\/static\/upload\/'+cart.image, \t\t   data: cart.category, \t\t   description:  cart.description, \t\t   cost_btn: cart.cost, \t\t   manufacture: cart.manufacture, \t\t  variant_tmpl: cart.variant_tmpl,  \t\t\t\t\t\t\t \t\t } \t\t\t\t\t\t \t\tthis.parent.setAllProps(props);  \t        \/\/\u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0440\u0430\u0437\u0443 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 setAllProps(props);\t\t\t\t\t \t},    click_category: function(){ \t\t\t\t\t\t\t\t this.rootLink.stateMethods.click_on_category(this, event); \t\t\t\t\t\t\t     },\t }, }, cart_variant_option: { \t\tcontainer: &quot;cart_variant_option&quot;,  \t\tprops: [&quot;click&quot;, &quot;select&quot;],   \t\tmethods: {  \t\t\t\tclick: function(){ \t\t\t\t\t \t\t\t\t\tconsole.log(this.parent.props.select.getProp()); \t\t\t\t} \t\t} \t\t }, cart_variant_radio: { \t\tselector: &quot;div:last-of-type&quot;, \t\tcontainer: &quot;cart_variant_radio_cont&quot;, \t\tprops: [&quot;click&quot;, &quot;radio&quot;], \t\tmethods: {  \t\t\t \t\t\t\tclick: function(){ \t\t\t\t\t \t\t\t\t\tconsole.log(this.parent.index+&quot; --- &quot;+this.parent.props.radio.getProp()); \t\t\t\t} \t\t\t\t \t\t} \t\t },      stateProperties:{ \/\/\u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043e\u0431\u0449\u0438\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\t\t \tcarts: [],\t\t      },      stateMethods: { \t   click_on_category: function(context, event){ \/\/\u043e\u0431\u0449\u0438\u0439 \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043a\u043b\u0438\u043a\u043e\u0432 \u043f\u043e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 categories \u0438 cart_single \t\t\t\t \t\t\tevent.preventDefault();\t\t\t\t \t\t\t\t \t\t\tvar historyUrl = &quot;\/category\/&quot;+context.parent.props.data.getProp(); \t\t\tvar url = historyUrl+&quot;\/json&quot;; \t\t\t\t \t\t\tcontext.rootLink.eventProps[&quot;emiter-click-on-category&quot;].setEventProp(context.parent.props.data.getProp()); \t\t\t\t \t\t\tcontext.rootLink.router.setRout(historyUrl); \t\t\t\tconsole.log(url); \t\t\tcontext.rootLink.stateMethods.load_carts(url, context); \t\t\t\t \t}, \tfetchCategoryCarts: function(url, callb){  \t\/\/ \u043e\u0431\u0449\u0438\u0439  \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043a\u0430\u043a\u043e\u0433\u043e \u043b\u0438\u0431\u043e \u0430\u0434\u0440\u0435\u0441\u0430 get \u0437\u0430\u043f\u0440\u043e\u0441\u043c,         \/\/\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u0445 \u0430\u0434\u0440\u0435\u0441 - url \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 callb \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043e\u043d \u043f\u0435\u0440\u0435\u0434\u0430\u0441\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435  \t\t\t\t\t \t   fetch(url).then((response) =&gt; { \t\tif(response.ok) { \t\t   return response.json(); \t\t}\t           \t\t  throw new Error('Network response was not ok'); \t    }).then((json) =&gt; { \t\tcallb(json);              }).catch((error) =&gt; { \t\t console.log(error); \t     });\t \t},  \tload_carts:  function(url, context ){  \t\/\/\u043c\u0435\u0442\u043e\u0434 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 fetchCategoryCarts \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0432 \u043d\u0435\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430  \t\/\/ \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e .carts \t\/\/\u0430 \u0442\u0430\u043a\u0436\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 &quot;emiter-load-carts&quot; \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0432 \u043d\u0435\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438  \t   context.rootLink.stateMethods.fetchCategoryCarts(url, function(data){ \t\t\t\t\t \t       context.rootLink.stateProperties.carts = data; \t\t\t\t\t \t      context.rootLink.eventProps[&quot;emiter-load-carts&quot;].setEventProp(data);\t\t\t\t \t\t\t\t\t \t    }); \t},       },      eventEmiters: {\/\/\u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c\u0438 \t  \t \t [&quot;emiter-click-on-cart&quot;]: { \t\t\t \t\t\tprop: &quot;&quot;, \t\t},\t\t          [&quot;emiter-click-on-category&quot;] : { \t\t\t \t\tprop: [],\t\t\t\t \t   }, \t   [&quot;emiter-load-carts&quot;]: { \t\t\t \t\t\tprop: &quot;&quot;, \t\t}       }\t\t }  var routes = { \t     [&quot;\/&quot;]: {\t\t         first: [&quot;categories&quot;, 'carts'],  \/\/\/ \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0441\u0442\u044c \u0432 html \u0444\u0430\u0439\u043b\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u044d\u0442\u043e\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0435, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b \u0441 \u0448\u0430\u0431\u043b\u043e\u043d\u0430, \u0432 fetch \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e  \troutComponent: {                  router_carts: &quot;carts&quot;, \/\/\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u0440\u043e\u0443\u0442\u0443            },  \t\ttemplatePath: &quot;\/static\/templates\/index.html&quot; \/\/ \u043f\u0430\u043f\u043a\u0430 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432      },\t\t\t      [&quot;\/category\/:idCategory&quot;]: {  \/\/\u0437\u043d\u0430\u043a `:` \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u0438 \u0441 \u043d\u0438\u043c \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u043d\u0438\u0435 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0433\u043e \u043d\u0430\u043b\u0438\u0447\u0438\u0435, \u0435\u0449\u0435 \u0435\u0441\u0442\u044c \u0437\u043d\u0430\u043a `*` \u0432 \u043a\u043e\u043d\u0446\u0435 \u0441\u043b\u043e\u0432\u0430 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 category1, category2, \u0438 \u0442.\u0434 \u0442\u043e \u0441\u0442\u0430\u0432\u0438\u043c \u0437\u0432\u0435\u0437\u0434\u043e\u0447\u043a\u0443 \u0432 \u043a\u043e\u043d\u0446\u0435 category*. \t\t \t first: [&quot;categories&quot;, 'carts', &quot;menu&quot;, &quot;home_page&quot;],   \t routComponent: {\t\t\t \t         router_carts: &quot;carts&quot;,\t\t\t \t\t},  \t  templatePath: &quot;\/static\/templates\/index.html&quot;  \t},\t      [&quot;\/cart\/:idCart&quot;]: {  \t\t \t  first: [&quot;categories&quot;, 'cart_single'],   \t  routComponent: { \t       router_carts: &quot;cart_single&quot;,\t\t\t \t   }, \t   templatePath: &quot;\/static\/templates\/index.html&quot;       }, }  \twindow.onload = function(){ \t\t\t\/\/\/\u0441\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440  HTMLix \t\t\t \t\tvar HM = HTMLixRouter(State, routes); \t\t \t\t \t\t \t\tvar url = window.location.pathname; \t\t \t\tif(window.location.pathname == &quot;\/&quot;){ \t\t\t \t\t\turl = url+&quot;json&quot;; \t\t\t \t\t}else{ \t\t\t \t\t\turl = url + &quot;\/json&quot;; \t\t} \t\t \t\tHM.stateMethods.fetchCategoryCarts(url, function(arr){  HM.stateProperties.carts = arr; }); \/\/\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u043f\u043e\u0441\u043b\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0449\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. \t\t \t\tconsole.log(HM); \t}  <\/code><\/pre>\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\/506572\/\"> https:\/\/habr.com\/ru\/post\/506572\/<\/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\/506572\/\">\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u043e\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u0434\u043b\u044f \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430 SPA \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u043c\u0430\u0433\u0430\u0437\u0438\u043d\u0430. \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u043d\u0430 node.js \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c express, \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u0430 \u2014 twig, \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u2014 NeDB, \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0444\u043e\u0440\u043c \u2014 \u043c\u043e\u0434\u0443\u043b\u044c formidable, \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u043d\u0430 htmlix.<\/p>\n<p>  \u0414\u043b\u044f \u0442\u0435\u0445 \u043a\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u043a\u043e\u043c \u0441 Htmlix, \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u044b \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/github.com\/SergeyOvechkin\/htmlix\"> \u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  \u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0443\u0440\u043e\u043a\u0430 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0447\u0430\u0442\u044c <a href=\"https:\/\/github.com\/SergeyOvechkin\/lesson_2.2\"> \u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  \u042d\u0442\u043e \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0434\u0430\u043b\u0438\u043c \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 <b>\/static\/js\/front.js<\/b> \u0432\u0441\u0435 \u0447\u0442\u043e \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u043c \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e:<\/p>\n<pre><code class=\"javascript\">var State = { };  \twindow.onload = function(){ \t\t\t\/\/\/\u0441\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440  HTMLix \t\t\t \t\tvar HM = new HTMLixState(State); \t        console.log(HM); \t} <\/code><\/pre>\n<p>  \u0418\u0442\u0430\u043a \u043c\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0443\u0434\u0430\u043b\u0438\u043b\u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0438\u0437 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u0438 \u0443 \u043d\u0430\u0441 \u043e\u0441\u0442\u0430\u043b\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u043a\u0430\u043a \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442:<\/p>\n<ul>\n<li> \u0441\u043f\u0435\u0440\u0432\u0430 \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0435\u0442, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u0432\u0435\u0434\u0435\u043c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438: <i>npm install<\/i><\/li>\n<li> \u0434\u0430\u043b\u0435\u0435 \u0432\u0432\u0435\u0441\u0442\u0438 \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 <i> node app <\/i> <\/li>\n<li> \u0437\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <i>localhost:3000<\/i> <\/li>\n<\/ul>\n<p>  \u0418\u0442\u0430\u043a \u043f\u043e\u043a\u043b\u0438\u043a\u0430\u0432 \u043f\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c \u043f\u0443\u043d\u043a\u0442\u0430\u043c \u043c\u0435\u043d\u044e \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0439 \u0441\u0435\u0440\u0432\u0435\u0440, \u0431\u0435\u0437 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0447\u0430\u0441\u0442\u0438 \u0442.\u043a. \u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0435\u0435 \u0443\u0434\u0430\u043b\u0438\u043b\u0438.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u043d\u043e\u0432\u043e \u043f\u043e\u044d\u0442\u0430\u043f\u043d\u043e \u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c, \u043d\u043e \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440.  <\/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-305297","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/305297","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=305297"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/305297\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=305297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=305297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=305297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}