Здравствуйте и добро пожаловать в мой блог. В этом блоге мы рассмотрим, как разрабатывать приложения Ember.JS.
Для начала мы рассмотрим, как установить Ember.JS. Что вам нужно сделать, так это загрузить Node.JS NPM с их веб-сайта. Я загрузил и установил 64-разрядную версию LTS Windows Installer в свою систему, но вы также можете установить текущую версию NPM, которая является более поздней.
После загрузки вы запускаете установщик и следуете конфигурации, наиболее подходящей для вашей системы, или вы можете выбрать, куда все установить. После того, как все будет установлено в вашей системе, откройте командную строку и запустите npm install -g [email protected]
для установки Ember.JS. Это загрузит все пакеты, которые вам понадобятся для разработки, и как только все будет загружено, начнется разработка.
Итак, теперь, когда все установлено для использования Ember, просто зайдите в папку основного диска на своем терминале с помощью cd / это приведет вас к основной папке вашего диска C:/, где я буду устанавливать свое приложение, в любое другое место тоже хорошо. Чтобы создать приложение, вы будете использовать ember new «insert-name».
Все в кавычках, как работает схема именования, без кавычек. Лично я буду создавать приложение списка Ember.JS и назову его ember-list.
Установка займет пару минут в зависимости от вашей системы. Если по какой-то причине кажется, что это не закончилось, просто щелкните правой кнопкой мыши терминал, и это должно сделать это.
Перейдите в папку, созданную для сохранения вашего приложения, и откройте папку приложения, и вы увидите следующее.
Здесь будет храниться в основном все для приложения, ваши модули разделены на папки.
Хорошо, теперь, чтобы проверить вашу установку, вам нужно будет изменить свой терминал в папку установки вашего приложения с cd project-name, снова ваш должен быть там, где вы установили свой применение. После того, как вы попадете в эту папку, запустите сервер с помощью ember serve. Это даст вам адрес и порт, где вы можете увидеть приложение
на сервере Livereload, который позволяет вам видеть изменения, которые вы вносите на сайт, в режиме реального времени. Когда вы находитесь в состоянии загрузки сервера в терминале, вы не сможете использовать его ни для чего другого, что вы можете сделать, чтобы выйти из этого состояния, нажав комбинацию CTRL + C и следует выйти из него.
Как только вы запустите сервер, скопируйте и вставьте адрес сервера и порт в свой веб-браузер, чтобы открыть окно. Это должно открыть следующий веб-сайт,
теперь, когда у нас запущен сервер, откройте папку приложения в IDE, которая вам нравится, я буду использовать Atom. Как только ваша любимая IDE запустится и загрузит папку приложения, откройте папку приложения, затем templates и, наконец, откройте application.hbs. Эта страница является индексом приложения, все, что вы видите здесь, будет отображаться на всех других страницах, и в этом файле мы видим компонент {{Welcome-Page}} приложения, это используется для отображения страницы приветствия.
Если вы удалите строку, приветственное сообщение исчезнет со страницы.
Теперь давайте приступим к разработке страницы приветствия. Сначала мы добавим список продуктов с базовым HTML-кодом, но мы будем добавлять {{#каждые товары как |item|}}, это переменная handlebars, на которой мы остановимся позже.
Выйдите из режима сервера и сгенерируйте новый контроллер с именем из файла application.hbs с помощью ember g controller application,
это создаст файл контроллера, в котором мы добавим информацию в список. Добавьте в этот файл переменную элементов, например items: ["Помидор", "Салат", "Картофель"].
Сохраните все свои файлы и проверьте свою перезагруженную веб-страницу, чтобы убедиться, что теперь у вас есть список, который вы составили.
Теперь давайте добавим поле ввода, которое будет использоваться для добавления дополнительных и новых элементов в список, в файле application.hbs добавьте над своим списком {{input value=itemName}} и ‹button{{action “addItem”}}›Добавить элемент‹/button› эти строки кода создадут входную переменную с именем itemName, которая добавит будущие элементы в список, а вторая строка добавит кнопку с действием добавления.
Если вы сделаете все правильно, вы должны увидеть следующее: на данный момент ничего не должно добавляться в список, но будут отображаться кнопка и ввод. Теперь, чтобы добавить элементы в список, добавьте следующие строки в свой контроллер после переменной items, но добавьте запятую в конце строки, в следующей строке добавьте
действия:{
добавитьItem: function(){
let itemName = this.get('itemName');
this.get('items').pushObject(itemName); }}
Это код для добавления элемента в список, и он должен выглядеть в вашем файле следующим образом:
он использует действие из файла шаблона и имеет недавно созданную переменную itemName, используемую для хранения значения из входного текста. Затем эти данные помещаются в массив элементов, который используется для отображения на веб-сайте. Это должно появиться после того, как вы попытаетесь добавить элемент.
Теперь все, что у нас есть до сих пор, должно хорошо работать для большинства приложений, но вы хотите сделать функцию списка пригодной для использования на любой странице, для этого сгенерируйте компонент с ember g component shopping-list, и это должно создать шаблон shopping-list.hbs. файл в разделе «Шаблоны» и файл shopping-list.js в папке компонента.
Скопируйте весь код из application.hbs в shopping-list.hbs и сделайте то же самое с контроллера на новый компонент. Если вы сохраните все до этого момента и перезагрузите, вы увидите, что все исчезло, вернитесь к файлу application.hbs и добавьте {{shopping-list}}, это добавит компоненты, которые вы только что создали, вместо добавления этого кода на каждую страницу, просто добавив {{shopping-list}}.
Все это только начало создания приложения для Ember, вы можете углубиться в свое приложение и использовать множество других инструментов, предоставленных вам сообществом Ember. Вы можете найти более подробные шаги по созданию более крупного приложения на веб-сайте Ember JS и в учебных пособиях по всему Интернету. Надеюсь, вам понравились мои блоги и вы узнали что-то новое из библиотеки Ember.JS.
