РЭДЛАЙН
Лучшие решения для Вас и Вашего бизнеса!
На нашем сайте вы можете получить информацию о веб-разработке, обслуживании и продвижении сайта. Интернет-маркетинге. SEO (поисковой оптимизации). Контекстной и медийной рекламе в Интернете. SMM. Регистрации доменов и хостинговых услугах. И современном дизайне сайтов. Вообщем того что касается веб-разработки, а также много другой полезной информации из мира интернета, бизнеса и интернет-технологий...
Создаем доступные и современные сайты, которые работают! Обслуживаем и эффективно продвигаем интернет-проекты с 2006 года!
Главная Web-мастеру Стартуем с Ember.js: следующий шаг (часть 2)


Стартуем с Ember.js: следующий шаг (часть 2)

В предыдущей части данного цикла статей мы рассмотрели основы Ember.js. Сегодня мы сделаем следующий шаг, чтобы лучше понять фрэймворк и многие фишки, которые помогут нам создавать одно-страничные приложения.

Простое приложение

Для начала нам нужно скачать и подключить к странице все нужные файлы для работы Ember. Как я говорил в прошлой статье, найти все нужные файлы можно на Github.

Самое интересное, что скачанные нами файлы - это классный пример для того, чтобы понять Ember. Давайте взглянем на них. В специфику мы нырнём чуть позже. Сначала, вам нужно понять общие принципы функционирования фрэймворка.

Открыв файл index.html, вы должны увидеть следующее:

Welcome to Ember.js

Ничего сверхъестественного, я знаю. Давайте теперь посмотрим на код. Если вы откроете файл “js/app.js”, то увидите следующее:

App = Ember.Application.create({});

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
    controller.set('content', ['red', 'yellow', 'blue']);
  }
});

Для инициализации приложения следует выполнить следующую строку:

App = Ember.Application.create({});

Это настраивает шаблон по умолчанию, обработчики событий и рутер.

Следующий код отвечает за настройку рутера. В данном примере, для index.html:

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
    controller.set('content', ['red', 'yellow', 'blue']);
  }
});

Рутер использует URL, для того чтобы определить, какое состояние приложения нужно отобразить пользователю.

На данный момент, срабатывает рутер по умолчанию, но его можно также задать явно:

App.Router.map( function() {
    this.resource( 'index', { path: '/' } ); // Переносит нас на "/"
});

Данный код определяет корневой URL нашего приложения. В дальнейшем, мы более подробно рассмотрим работу с рутером.

Давайте вернёмся к следующему коду:

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
    controller.set('content', ['red', 'yellow', 'blue']);
  }
});

В случае, если пользователь направится в корень нашего приложения, Ember настроит контроллер, который загружает в приложение контент, доступный по ключу content. В дальнейшем, по этому ключевому слову мы сможем доставать эти данные в других частях приложения. Теперь давайте посмотрим, что происходит в index.html:

<script type="text/x-handlebars" data-template-name="index">
<h2>Welcome to Ember.js</h2>
<ul>
{{#each item in model}}
    <li>{{item}}</li>
{{/each}}
 </ul>
</script>

Это пример использования шаблонизатора Handlebars, для вывода данных на страницу приложения. Ember считывает атрибуты data-*, и в зависимости от этого, вызывает соответствующий контроллер с данными.

В конце прошлой статьи я писал о важности правил именования ресурсов Ember для упрощения работы. Если вы взгляните на код выше, то увидите, что в данном примере вызывается шаблон index (в атрибуте data-template-name). Благодаря этому названию, Ember определяет, какой рутер нужно запустить, т.к. их имена совпадают. Название рутера “IndexRoute”, а внутри определён контроллер:

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
    controller.set('content', ['red', 'yellow', 'blue']);
  }
});

В контроллере создаётся источник данных под ключевым словом content, куда мы помещаем массив, состоящий из 3х строк. Как правило, в этом контексте, массив - это модель.

Правильное именование помогает Ember подключаться к нужным ресурсам (к контроллерам с моделью). Именно поэтому при выводе данных в шаблоне можем пользоваться как ключевым словом content, так и model:

{{#each item in model}}
    <li>{{item}}</li>
{{/each}}

Данные строки генерируют код, который вы видите на странице.

Я думаю, что этот демо пример хорошо демонстрирует основы функционирования приложения на Ember. Чем лучше вы поймёте, как взаимодействуют между собой различные компоненты фрэймворка, тем быстрее освоите библиотеку. Теперь давайте начнём всё с нуля, чтобы лучше разобраться в деталях.

Начинаем всё с нуля

Я уже вскользь коснулся главного объекта приложения. В документации есть вся необходимая инфа о том, что происходит при инициализации объекта:

Настройка пространства имён вашего приложения. Все классы превращаются в свойства объекта (пр. App.PostsView и App.PostsController). Это помогает предотвратить всевозможные коллизии;

  • Настройка обработчиков событий;
  • Автоматическая обработка базового шаблона приложения, на основе которого будут работать другие шаблоны;
  • Автоматическая настройка рутера, в зависимости от текущего URL.

Итак, всё выше перечисленное происходит при выполнении команды:

App = Ember.Application.create({});

Прошу заметить, что App - это не ключевое слово в Ember. Это обычная глобальная переменная, определяющая пространства имён. Почему именно App? Потому что множество демо примеров документации используют именно это название. Чтобы после копирования примеров не нужно было что-то переименовывать, сообщество использует название App.

Ember автоматически генерирует изначальные настройки:

// создаёт пространство имён для приложения
App = Ember.Application.create({});

// создаёт глобальный рутер
App.Router.map( function() {});

// создаёт изначальные настройки рутера
App.ApplicationRoute = Ember.Route.extend({});

// создаёт базовый шаблон
<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>

Теперь давайте поговорим о шаблоне по умолчанию. Почему мы не видим его содержимое? Потому что для этого нужно выставить специальную настройку.

Для определения шаблонов приложения можно использовать тот же синтаксис, что мы видели раньше, но только с одним отличием: имя шаблона указывать не обязательно. Обычный шаблон может быть создан следующим образом:

<script type="text/x-handlebars">
    <h1>Application Template</h1>
</script>

или так:

<script type="text/x-handlebars" data-template-name="application">
    <h1>Application Template</h1>
</script>

Если не задать шаблону имя через атрибут data-template-name, то Ember расценит его как шаблон приложения и обработает должным образом.

Если сейчас в файл index.html добавить следующий код:

<script type="text/x-handlebars" data-template-name="application">
    <h1>Application Template</h1>
    {{outlet}}
</script>

то заголовок появится на странице. Маркер {{outlet}} будет заменён на вывод отдельного шаблона страницы. Базовый шаблон позволяет создать общее оформление разным состояниям вашего приложения: шапку, подвал и так далее.. Добавив базовый шаблон в index.php, вы словно говорите Ember действовать следующим образом:

  • Автоматически обработать шаблон приложения;
  • Заменить {{outlet}} на содержимое шаблона текущей страницы;
  • Обработать и вывести содержимое шаблона index.

Тут главное создать базовый шаблон. Обо всём остальном Ember позаботится сам. Именно это делает эту библиотеку такой мощной.

Настройка рутера

Понять, как работать с рутором, очень важно, ведь это ключевая часть Ember. Для того, чтобы отслеживать навигацию по приложению, нужно создать специальный метод. Тут-то и понадобятся знания о том, как настроить рутер.

Объекты рутера определяют, какие ресурсы нужно отобразить при навигации по приложению.

Взгляните на js/app.js, и вы найдёте код создания рутера для начальной страницы:

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
    controller.set('content', ['red', 'yellow', 'blue']);
  }
});

Однако самого объекта тут нет. Ember сам создаст его, в случае необходимости. Для начальной страницы это будет выглядеть примерно так:

App.Router.map( function() {
   this.resource( 'index', { path: '/' } );
});

Данный код означает, что Ember создаёт маршрут для главной страницы, и в случае, если пользователь на неё зашёл, будет вызван маршрут index (IndexRoute). Вот почему многое работает на автопилоте. По слову index, Ember будет искать опцию для маршрута IndexRoute. При создании данного маршрута мы указали контроллер с данными.

Поскольку Ember использует URL для определения состояния приложения, которое нужно отобразить пользователю, для каждого из них нужно создать свой маршрут. Представьте, что у нас есть следующие страницы:

  • Аккаунт: (URL: /account)
  • Профиль (URL: /profile)
  • Галерея (URL: /gallery)

В каждый из этих секций будет подгружаться собственная пачка данных. Для создания обработчика маршрутов необходимо воспользоваться методом resourse():

App.Router.map( function() {
   this.resource( 'accounts' );
   this.resource( 'profiles' );
   this.resource( 'gallery' );
});

Данный код поможет Ember понять структуру вашего приложения, и в зависимости от этого, правильно управлять ресурсами. Теперь нам необходимо создать сами маршруты следующего вида:

App.GalleryRoute = Ember.Route.extend({
  setupController: function(controller) {
    controller.set('content', ['pic-1.png', 'pic-2.png', 'pic-3.png']);
  }
});

Теперь при навигации на “/gallery”, Ember.js инициирует объект GalleryRoute, настраивает контроллер с данными и рендерит шаблон. Всё это происходит на автомате, благодаря правильному именованию ресурсов.

Также у вас есть возможность использовать сложные url вида: /account/new

В этом случае, настройка рутера будет выглядеть так:

App.Router.map( function() {
   this.resource( 'accounts',  function() {
     this.route( 'new' );
   });
});

В этом фрагменте, внутри метода resource(), происходит дополнительная надстройка маршрута с помощью route(). В этом случае, Ember сначала убедится в наличии ресурса accounts и обработает шаблон accounts. Затем будет уже обрабатывать ресурсы для шаблона accounts.new.

Также можно создавать ещё более сложные структуры:

App.Router.map( function() {
  this.resource( 'accounts', function() {
    this.route( 'new' );
    this.resource( 'pictures', function() {
      this.route( 'add' );
    });
  });
});

Итог

Надеюсь, у вас теперь сложится более полное впечатление о работе с Ember. В следующей статье мы продолжим расширять наши познания в этом прикольном фрэймворке!

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/QuZDJ4bLsJo/lessons.php

Стартуем с Ember.js: следующий шаг (часть 2) | | 2013-05-27 08:28:47 | | Статьи Web-мастеру | | В предыдущей части данного цикла статей мы рассмотрели основы Ember.js. Сегодня мы сделаем следующий шаг, чтобы лучше понять фрэймворк и многие фишки, которые помогут нам создавать одно-страничные | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Дайджест новых статей по интернет-маркетингу на ваш email
Подписаться

Продающие сайты "под ключ"!

Наши сайты зарабытывают вам деньги. Landing-page. Эффективные продающие сайты точно в срок и под ключ! Всего от 14700 рублей
Подробнее...

Интернет-магазины и каталоги "под ключ"!

Эффективные и удобные инструменты торговли (электронной торговли) "под ключ". Продают, даже когда вы спите! Всего от 33800 рублей
Подробнее...

Комплексный интернет-маркетинг и продвижение сайтов

Максимальную эффективность дает не какой-то конкретный метод, а их комбинация. Комбинация таких методов и называется комплексным интернет-маркетингом. Всего от 8000 рублей в месяц
Подробнее...

Реклама в Yandex и Google

Контекстная реклама нацелена лишь на тех пользователей, которые непосредственно заинтересованы в рекламе Ваших услуг или товаров. Всего от 8000 рублей в месяц
Подробнее...

Social media marketing (SMM) — продвижение в социальных медиа

Реклама в Однокласcниках и на Mail.ru Создание, ведение и раскрутка групп и реклама ВКонтакте и Facebook. Всего от 8000 рублей в месяц
Подробнее...

Приглашаем к сотрудничеству рекламные агентства и веб-студии!

Внимание Акция! Приглашаем к сотрудничеству рекламные агентства и различные веб-студии России! Индивидуальные и взаимовыгодные условия сотрудничества.
Подробнее...

Ускоренная разработка любого сайта от 5 дней!

Внимание Акция! Ускоренная разработка любого сайта! Ваш сайт будет готов за 5-10 дней. Вы можете заказать разработку любого сайта "под ключ" за 5-10 рабочих дней, с доплатой всего 30% от его стоимости!
Подробнее...

Ждем новых друзей!

Внимание Акция! Ждем новых друзей! Скидка 10% на услуги по созданию и(или) обслуживанию вашего сайта при переходе к нам от другого разработчика.
Подробнее...

Приведи друга и получи скидку!

Внимание Акция! Приведи друга и получи скидку! Скидка 10% на услуги по созданию и(или) обслуживанию вашего сайта, если клиент заказавший наши услуги, пришел по Вашей рекомендации.
Подробнее...

1 2 3 4 5 6 7 8 9

Новые статьи и публикации


Услуги интернет компании Редлайн

"Успеха в ближайшем десятилетии добьются только те компании, которые сумеют реорганизовать свою работу с помощью электронного инструментария. Только это позволит им быстро принимать правильные решения, предпринимать эффективные действия и поддерживать тесные плодотворные связи со своими клиентами."
Билл Гейтс

Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!

Качественное и объемное представление своего бизнеса в Сети требуется любой растущей коммерческой структуре, стремящейся увеличить продажи, именно по этой причине среди наших клиентов как крупные так и небольшие компании во многих городах России и ближнего зарубежья.
Как мы работаем

Заявка
Позвоните или оставьте заявку на сайте.


Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!


Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.


Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.


Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.

Остались еще вопросы? Просто позвоните и задайте их специалистам
с 2:30 до 11:30 по Мск, звонок бесплатный
Или напишите нам в WhatsApp
с 9:30 до 18:30 по Хабаровску
Или напишите нам в WhatsApp
Веб-студия и агентство комплексного интернет-маркетинга «РЭДЛАЙН» © 2006 - 2024

Профессиональная Веб-разработка. Создание сайтов и магазинов "под ключ" , а также по всей России и зарубежью. Продвижение и реклама. Веб-дизайн. Приложения. Сопровождение. Модернизация. Интеграции. Консалтинг. Продвижение и реклама. Комплексный Интернет-маркетинг.

Оставьте заявку / Задайте вопрос

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Заказать услугу

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Обратный звонок

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Подписка на дайджест новостей

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Заказать услуги со скидкой \ Бесплатная консультация







КАКИЕ УСЛУГИ ВАС ИНТЕРЕСУЮТ?

КАКИЕ ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ ПОТРЕБУЮТСЯ?

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Высококачественные сайты по доступным ценамМы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!

Что нужно сделать, чтобы заказать создание сайта у нас?

Ну для начала вам нужно представлять (хотя бы в общих чертах), что вы хотите получить от сайта и возможно каким вы хотите его видеть. А дальше все просто. Позвоните нам или оставьте заявку нашим менеджерам, чтобы они связались с Вами, проконсультировали и помогли определиться с подходящим именно Вам сайтом по цене, сроку, дизайну или функционалу. Если вы все ещё не уверены, какой сайт вам нужен, просто обратитесь к нам! Мы вместе проанализируем вашу ситуацию и определим максимально эффективный для вас вариант.

Быстрый заказ \ Консультация

Для всех тарифных планов на создание и размещение сайтов включено:

Комплексная раскрутка сайтов и продвижение сайта Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...

Комплексная раскрутка работает в рамках стратегии развития вашего бизнеса в сети и направлена

Быстрый заказ \ Консультация

ЭФФЕКТИВНОЕ СОПРОВОЖДЕНИЕ (ПОДДЕРЖКА, ОБСЛУЖИВАНИЕ) САЙТОВ

Полный комплекс услуг по сопровождению сайтаМы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.

Передав свой сайт для поддержки в руки наших специалистов, Вы избавитесь от проблем, связанных с обновлением информации и контролем за работой ресурса.

Наша компания осуществляет техническую и информационную поддержку уже имеющихся сайтов. В понятие «поддержка сайтов» также входят услуги администрирования сайтов, обновления сайтов и их модернизация.

Быстрый заказ \ Консультация

Редизайн сайта и Адаптивный веб дизайн

Современный, технологичный, кроссбраузерный ... Профессиональный дизайн сайтов и веб-приложений

Редизайн сайта — создание нового дизайна сайта с целью улучшения внешнего вида, функциональности и удобства использования. Редизайн сайта – это способ преобразовать проект к извлечению из него максимальной отдачи и средств. В современном мире задачами редизайна является поднятие существующего сайта на новый уровень для внедрения новых технологий, при этом сохраняя многолетний сформировавшийся опыт и успешные решения компаний.

Адаптивный дизайн сайтов и веб-приложений

Все больше людей пользуются мобильными устройствами (телефонами, планшетами и прочими) для посещения Интернета, это не для кого уже не новость. Количество таких людей в процентном отношении будет только больше с каждым годом, потому что это удобно и по многим другим причинам.

На сегодняшний день адаптивный дизайн является стандартным подходом при разработке новых сайтов (или веб-приложений) и в идеале ваш сайт должен смотреться и функционировать так, как вы задумывали, на всём разнообразии устройств.

Быстрый заказ \ Консультация

Контекстная реклама в Яндекс и GoogleКонтекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.

Реклама в поисковых системах Яндекс и Google. Профессиональная настройка рекламы и отслеживание эффективности!

Рекламные объявления показываются именно тем пользователям, которые ищут информацию о Ваших товарах или услугах, поэтому такая реклама не является навязчивой и раздражающей в отличие от других видов рекламы, с которыми мы сталкиваемся на телевидении или радио. Контекстная реклама нацелена лишь на тех пользователей, которые непосредственно заинтересованы в рекламе Ваших услуг или товаров.

Быстрый заказ \ Консультация

Скидка

1500 руб.
Заинтересовались услугами создания, обслуживания или продвижения вашей компании в Интернете?!
Получите 1500 руб.
за он-лайн заявку
Предложение ограничено.

После получения заявки с Вами свяжутся наши специалисты и уточнят все детали по интересующей вас услуге.
«Нажимая на кнопку "Получить скидку", я даю согласие на обработку персональных данных»
×
Получите 1500 рублей!
×
×