{"id":307133,"date":"2020-07-18T09:00:17","date_gmt":"2020-07-18T09:00:17","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=307133"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2020-07-18T09:00:17","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=307133","title":{"rendered":"\u041e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 jquery"},"content":{"rendered":"\n
\u041c\u043d\u043e\u0433\u043e \u043a\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 jquery \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u0432 \u0441\u0432\u044f\u0437\u0438 \u0441 \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u043e\u0439 \u0438 \u043b\u0435\u0433\u043a\u043e\u0441\u0442\u044c\u044e, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e \u0447\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u044b\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c. \u041e\u0434\u043d\u0430\u043a\u043e \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435 \u043e\u043d\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 html \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0438\u0437 javascript \u043a\u043e\u0434\u0430, \u0447\u0442\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0443\u0434\u043e\u0431\u043d\u043e, \u0434\u043b\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438, \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u043d\u0430 js \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u043b\u0438\u0431\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043d\u0430 node.js \u0447\u0442\u043e \u0438\u0441\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u044f\u0437\u044b\u043a\u0430\u043c\u0438 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 php. <\/p>\n

\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c, \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b, \u0438\u043b\u0438 \u0443\u0447\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e jquery, \u0432\u0442\u043e\u0440\u043e\u0433\u043e angular, \u0430 \u0434\u043b\u044f \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u0438\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043a vue.js. <\/p>\n

\u0411\u044b\u043b\u043e-\u0431\u044b \u0437\u0434\u043e\u0440\u043e\u0432\u043e \u0438\u043c\u0435\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u044b\u043c\u0438 \u0437\u0430\u0434\u0430\u0447\u0430\u043c\u0438, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e:<\/p>\n

    \n
  1. \u0412\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0443\u0436\u0435 \u043e\u0442\u0434\u0430\u043d\u043d\u0443\u044e \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043d\u0430 node.js \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0435\u0433\u043e \u0441 \u043b\u044e\u0431\u044b\u043c\u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438 <\/li>\n
  2. \u0418\u043c\u0435\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0447\u0435\u0442\u043a\u0443\u044e \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432. <\/li>\n
  3. \u041b\u0435\u0433\u043a\u043e\u0441\u0442\u044c \u0432 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0438, \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0440, \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0433\u043e \u043a\u0430\u043a \u0432 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u0442\u0430\u043a \u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432, \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u0432 \u0438 \u0442.\u0434.<\/li>\n<\/ol>\n

    \u041a\u0430\u043a \u0432\u044b \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435 \u0443\u0436\u0435 \u0434\u043e\u0433\u0430\u0434\u0430\u043b\u0438\u0441\u044c, \u0437\u0434\u0435\u0441\u044c \u044f \u043a\u0430\u043a \u0440\u0430\u0437 \u0438 \u0445\u043e\u0447\u0443 \u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u2014 htmlix.js<\/a>
    <\/a>
    \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0443\u0436\u0435 \u043e\u0442\u0434\u0430\u043d\u043d\u0443\u044e \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e data- <\/b> \u0441\u0432\u043e\u0439\u0441\u0442\u0432.
    \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u043d\u0430 \u043a\u0430\u043a\u043e\u043c \u043b\u0438\u0431\u043e \u0434\u0440\u0443\u0433\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u0432 js \u043a\u043e\u0434\u0435, \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 html.<\/p>\n

    \u0414\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0447\u0442\u043e\u0431\u044b \u0432 \u0441\u0436\u0430\u0442\u043e\u043c \u0432\u0438\u0434\u0435 \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430.<\/p>\n

    \u0423\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0439, \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043a\u043b\u0438\u043a\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c.<\/a><\/p>\n

    \u041f\u043e\u0441\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u0438\u043c\u0435\u043d\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u0444\u043e\u0440\u043c\u0443, \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442 \u0435\u0433\u043e \u0438\u043c\u044f \u0432 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438, \u043a\u043d\u043e\u043f\u043a\u0435 \u0432\u044b\u0445\u043e\u0434\u0430, \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e \u043d\u043e\u0432\u043e\u043c \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u0435\u043b\u0435 \u0438 \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 localStorage. \u041f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0432\u043e\u0437\u044c\u043c\u0435\u0442 \u0438\u043c\u044f \u0438\u0437 localStorage. \u041f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 \u00ab\u0432\u044b\u0439\u0442\u0438 \u0438\u0437 \u043f\u0440\u043e\u0444\u0438\u043b\u044f\u00bb \u0443\u0434\u0430\u043b\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u043e \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0438\u0437 localStorage \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e \u0432\u044b\u0445\u043e\u0434\u0435 \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u0435\u043b\u044f.<\/p>\n

    \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0447\u0435\u0442\u044b\u0440\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430: \u0444\u043e\u0440\u043c\u0443 \u0432\u0445\u043e\u0434\u0430 \u2014 form, \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u2014 greeting, \u043a\u043d\u043e\u043f\u043a\u0443 \u0432\u044b\u0445\u043e\u0434\u0430 \u2014 logout \u0438 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u0435\u043b\u044f\u043c\u0438 \u2014 users_array.<\/p>\n

    \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c html \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432: <\/p>\n

    <!--  \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 - \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0444\u043e\u0440\u043c\u0430 \u0441 \u0434\u0432\u0443\u043c\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 input c \u0442\u0438\u043f\u043e\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 "inputvalue" \u0438  click \u0441 \u0442\u0438\u043f\u043e\u043c "click" -->  <form data-form="container" class="card col-12">    <div class="form-group">        <label for="">\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0438\u043c\u044f<\/label>       <textarea data-form-input="inputvalue" class="form-control" rows="1"><\/textarea>     <\/div>     <button data-form-click="click" type="submit">Submit<\/button> <\/form>  <!-- \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 - \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e user_name \u0441 \u0442\u0438\u043f\u043e\u043c - "text" -->  <div data-greeting="container" class="col-6 card">                 <p>\u041f\u0440\u0438\u0432\u0435\u0442: <span  data-greeting-user_name="text">guest<\/span><\/p> <\/div>   <!-- \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 - \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043a\u043d\u043e\u043f\u043a\u0430 \u0432\u044b\u0445\u043e\u0434\u0430 \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e user_name \u0441 \u0442\u0438\u043f\u043e\u043c - "text" -->  <div data-logout="container" class="col-6 card">               <a href="#"> \u0412\u044b\u0439\u0442\u0438 \u0438\u0437 \u043f\u0440\u043e\u0444\u0438\u043b\u044f: ( <span  data-logout-user_name="text"><\/span>  )       <\/a>                 <\/div>   <!-- \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 - \u043c\u0430\u0441\u0441\u0438\u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0441 \u0434\u0432\u0443\u043c\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u043c\u0438, \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e user_name - "text", \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0430  message \u0441 \u0442\u0438\u043f\u043e\u043c "text" \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 -->   <div data-users_array="array">      <p  data-users_array-message="text" > <\/p>\t\t \t <div  class="row"> \t\t             <div data-user="container" class="col-4 card"> \t\t<p>\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c - <span data-user-user_name="text">user_name_1<\/span>                  <\/p> \t     <\/div> \t\t\t              <div data-user="container" class="col-4 card"> \t\t <p>\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c - <span data-user-user_name="text">user_name_2<\/span>                   <\/p> \t      <\/div> \t\t         <\/div>\t <\/div>\t \t\t <\/code><\/pre>\n
      \u0412 \u043a\u043e\u0434\u0435 \u0432\u044b\u0448\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0447\u0435\u0442\u044b\u0440\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430: \u0442\u0440\u0438 \u0438\u0437 \u043d\u0438\u0445 \u0441 \u0442\u0438\u043f\u043e\u043c \u00abcontainer\u00bb \u0438 \u043e\u0434\u0438\u043d \u0441 \u0442\u0438\u043f\u043e\u043c \u00abarray\u00bb \u2014 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u0435\u043b\u044f\u043c\u0438. \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u2014 \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u0433\u0440\u0443\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u044b, \u043a\u0430\u043a\u0438\u0435 \u043b\u0438\u0431\u043e html \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0435\u043a\u0441\u0442, \u0430\u0442\u0440\u0438\u0431\u0443\u0442, \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438 \u0442.\u0434. \u0412\u0441\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438\u043c\u0435\u044e\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0442\u0438\u043f. \u041c\u0430\u0441\u0441\u0438\u0432 \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043e\u0434\u043d\u043e\u0442\u0438\u043f\u043d\u044b\u043c\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u043c\u0438, \u0443 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0442\u0430\u043a-\u0436\u0435 \u043a\u0430\u043a \u0438 \u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. <\/p>\n
      \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u043c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 html \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e data- \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u0442\u0430\u043a\u0436\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432<\/a> \u0438\u0437 javascript \u043a\u043e\u0434\u0430, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0438\u0445 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435.<\/p>\n
      \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043c \u0438\u0445 \u0432 javascript:<\/p>\n
    var StateMap = {      form: {\/\/\u0444\u043e\u0440\u043c\u0430 \u0432\u0445\u043e\u0434\u0430         container: "form",         props: ["input", "click"],         methods: {              click: function(){                 event.preventDefault(); \/\/\u043e\u0442\u043c\u0435\u043d\u044f\u0435\u043c \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b                                   \/\/this - \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u043c\u0441\u044f, parent - \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443 \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430                 \/\/\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 input                  var text = this.parent.props.input.getProp();                  console.log(text);                                       }                    },           },       greeting: {\/\/\u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435          container: "greeting",         props: [ "user_name", ],          methods: {             }     },     logout: { \/\/\u043a\u043d\u043e\u043f\u043a\u0430 \u0432\u044b\u0445\u043e\u0434\u0430          container: "logout",         props: [ "user_name", ],          methods: {         },       },     users_array: { \/\/\u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438          selector: "div.row", \/\/\u0443\u0442\u043e\u0447\u043d\u044f\u044e\u0449\u0438\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \tarrayProps: [ "message"], \/\/\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430           container: "user",  \/\/\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043c\u0430\u0441\u0441\u0438\u0432\u0430         props: [ "user_name", ], \/\/\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430         methods: {                 },               }, } window.onload = function(){\/\/\u0441\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f htmlix      var HM = new HTMLixState(StateMap);     console.log(HM);     } <\/code><\/pre>\n
      \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u043c\u044b \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 javascript \u043a\u043e\u0434. \u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 form \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 click \u043c\u044b \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e text \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0438\u0445 \u043f\u043e\u043a\u0430-\u0447\u0442\u043e \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c. \u0414\u0430\u043b\u0435\u0435 \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043e \u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u0432\u0448\u0438\u0445\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0443\u0437\u043d\u0430\u043b\u0438 \u043e \u0442\u043e\u043c \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0431\u043d\u043e\u0432\u0438\u043b\u0438\u0441\u044c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f. <\/p>\n
      \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u00abemiter-set-name\u00bb:<\/p>\n
    eventEmiters: {  \/\/\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \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 \u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \t\t    ["emiter-set-name"]: {prop: ""}, \/\/\u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \t\t },   \/\/\/\u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 click \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 form \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0432 \u043d\u0435\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 click: function(){         event.preventDefault();          var text = this.parent.props.input.getProp();          this.rootLink.eventProps["emiter-set-name"].setEventProp(text);            \/\/\u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 localStorage                           window.localStorage.setItem('user_name', name);  }    \/\/\u0441\u043b\u0443\u0448\u0430\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0432\u043e \u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 greeting: {      container: "greeting",      props: [ "user_name", ['listen_set_name', "emiter-set-name", "" ],], \/\/\u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435       methods: { \t\t\t           listen_set_name: function(){ \t\t\/\/\u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u043b\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e user_name \t\tthis.parent.props.user_name.setProp( this.emiter.getEventProp() ); \t  }\t\t\t        },\t\t },   logout: {  \t\t    container: "logout",    props: [ "user_name",  ['listen_set_name', "emiter-set-name", "" ] ],     methods: { \t\t\t \t listen_set_name: function(){\/\/\u0441\u043b\u0443\u0448\u0430\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e user_name \t\t\t\t \t    this.parent.props.user_name.setProp( this.emiter.getEventProp() ); \t},\t\t\t     },\t },    users_array: {   \tselector: "div.row", \tarrayProps: [    "message",  ['listen_set_name', "emiter-set-name", ""],\t],  \tarrayMethods: { \t\t\t\t\t\t\t \t   listen_set_name: function(){\/\/\u0441\u043b\u0443\u0448\u0430\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \t\t\t\t \t            this.parent.add( {user_name: this.emiter.getEventProp()} );                                         \/\/\u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e \u043d\u043e\u0432\u043e\u043c \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u0435\u043b\u0435                     this.parent.props.message.setProp("\u043d\u043e\u0432\u044b\u0439 \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u0435\u043b\u044c - "+this.emiter.getEventProp());  \t\t\t\t\t\t\t\t \t    },\t\t \tcontainer: "user", \tprops: [ "user_name", ], \tmethods: { \t},        \t },    window.onload = function(){  \tvar HM = new HTMLixState(StateMap);                  \/\/\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0435\u0441\u0442\u044c \u043b\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f  user_name \u0432  localStorage \u0438 \u043f\u0440\u0438 \u0435\u0435 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435  \tvar name = window.localStorage.getItem('user_name');\t \tif(name != null)HM.eventProps["emiter-set-name"].setEventProp(name);   \tconsole.log(HM); \t }\t  <\/code><\/pre>\n
      \u0412 \u043a\u043e\u0434\u0435 \u0432\u044b\u0448\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0441\u043b\u0443\u0436\u0438\u0442 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c \u0434\u043b\u044f \u043c\u0435\u043d\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u0437\u0430\u0442\u0435\u043c \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e-\u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435.<\/p>\n
      \u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u00abemiter-exit-user\u00bb \u0434\u043b\u044f \u0432\u044b\u0445\u043e\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f:<\/p>\n
    \teventEmiters: { \t\t\/*      ...        *\/ \t\t["emiter-exit-user"]: {prop: ""},  \t\t \t}             \/\/\u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 logout \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0432 \u043d\u0435\u0433\u043e \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f logout: { \t\t     container: "logout",     props: [ \/* ...  *\/,  ["exit", "click", "a:first-of-type"],], \/\/\u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043d\u043e\u0432\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e - \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f "click" \u0438 \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0435\u0433\u043e \u0432\u0442\u043e\u0440\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0430\u0441\u0441\u0438\u0432\u0430        methods: {            \/* ... *\/ \t   exit: function(){ \t      \/\/\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \t     var user_name = this.parent.props.user_name;  \t     \/\/\u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435\t\t \t     this.rootLink.eventProps["emiter-exit-user"].setEventProp( user_name.getProp() );  \t                     \/\/\u0443\u0434\u0430\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u0437 localStorage \t     window.localStorage.removeItem('user_name');                                \/\/\u043e\u0447\u0438\u0449\u0430\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \t      user_name.setProp(""); \t    }\t\t\t \t},\t },   users_array: {   \tselector: "div.row", \tarrayProps: [ \/* .. *\/,   ['listen_exit_user', "emiter-exit-user", ""], ], \/\/\u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e - \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f  "emiter-exit-user"  \tarrayMethods: { \t\t\/* ... *\/ \t\tlisten_exit_user: function(){ \t\t\t\/\/data - \u0434\u043e\u0441\u0442\u0443\u043f \u043a\u043e \u0432\u0441\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u043c \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \t\t\tthis.parent.data.forEach(container=>{ \t\t\t\t\t \t\t\t\tif(container.props.user_name.getProp() == this.emiter.getEventProp()){ \t\t\t\t\t\t \t\t\t\t         container.remove(true); \/\/\u0443\u0434\u0430\u043b\u0438\u043b\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440  \t\t\t\t}\t\t\t\t\t \t\t\t});                   \/\/\u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435\t\t\t                  this.parent.props.message.setProp( this.emiter.getEventProp()+" - \u043f\u043e\u043a\u0438\u043d\u0443\u043b \u0441\u0430\u0439\u0442"); \t\t\t},\t\t\t \t\t},\t\t \t\tcontainer: "user", \t\tprops: [ "user_name", ], \t\tmethods: { \t\t},        \t },\t   greeting: { \t\t \t\tcontainer: "greeting", \t\tprops: [\/* ... *\/, ['listen_exit_user', "emiter-exit-user", ""] ],  \t\tmethods: { \t\t\t \t\t\tlisten_exit_user: function(){  \t\t\t       \/\/\u0443\u0434\u0430\u043b\u0438\u043b\u0438 \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \t\t\t\tthis.parent.props.user_name.setProp(""); \t\t\t}\t\t\t \t\t},\t\t \t},  <\/code><\/pre>\n
      \u042d\u0442\u043e \u0431\u044b\u043b \u043a\u0440\u0430\u0442\u043a\u0438\u0439 \u043e\u0431\u0437\u043e\u0440 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 htmlix, \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0437\u0434\u0435\u0441\u044c<\/a>.<\/div>\n
     \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/post\/509502\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n
    \u041c\u043d\u043e\u0433\u043e \u043a\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 jquery \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u0432 \u0441\u0432\u044f\u0437\u0438 \u0441 \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u043e\u0439 \u0438 \u043b\u0435\u0433\u043a\u043e\u0441\u0442\u044c\u044e, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e \u0447\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u044b\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c. \u041e\u0434\u043d\u0430\u043a\u043e \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435 \u043e\u043d\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 html \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0438\u0437 javascript \u043a\u043e\u0434\u0430, \u0447\u0442\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0443\u0434\u043e\u0431\u043d\u043e, \u0434\u043b\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438, \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u043d\u0430 js \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u043b\u0438\u0431\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043d\u0430 node.js \u0447\u0442\u043e \u0438\u0441\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u044f\u0437\u044b\u043a\u0430\u043c\u0438 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 php. <\/p>\n
      \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c, \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b, \u0438\u043b\u0438 \u0443\u0447\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e jquery, \u0432\u0442\u043e\u0440\u043e\u0433\u043e angular, \u0430 \u0434\u043b\u044f \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u0438\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043a vue.js. <\/p>\n
      \u0411\u044b\u043b\u043e-\u0431\u044b \u0437\u0434\u043e\u0440\u043e\u0432\u043e \u0438\u043c\u0435\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u044b\u043c\u0438 \u0437\u0430\u0434\u0430\u0447\u0430\u043c\u0438, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e:<\/p>\n
      \n
    1. \u0412\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0443\u0436\u0435 \u043e\u0442\u0434\u0430\u043d\u043d\u0443\u044e \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043d\u0430 node.js \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0435\u0433\u043e \u0441 \u043b\u044e\u0431\u044b\u043c\u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438 <\/li>\n
    2. \u0418\u043c\u0435\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0447\u0435\u0442\u043a\u0443\u044e \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432. <\/li>\n
    3. \u041b\u0435\u0433\u043a\u043e\u0441\u0442\u044c \u0432 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0438, \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0440, \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0433\u043e \u043a\u0430\u043a \u0432 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u0442\u0430\u043a \u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432, \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u0432 \u0438 \u0442.\u0434.<\/li>\n<\/ol>\n
        \u041a\u0430\u043a \u0432\u044b \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435 \u0443\u0436\u0435 \u0434\u043e\u0433\u0430\u0434\u0430\u043b\u0438\u0441\u044c, \u0437\u0434\u0435\u0441\u044c \u044f \u043a\u0430\u043a \u0440\u0430\u0437 \u0438 \u0445\u043e\u0447\u0443 \u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u2014 htmlix.js<\/a>  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-307133","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/307133","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=307133"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/307133\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=307133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=307133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=307133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}