Отображение нескольких кадров с маршрутизатором в EmberJS

введите здесь описание изображения

Я только начал изучать EmberJS и все еще выясняю стандартные способы работы.

Я хочу знать, возможно ли что-то вроде изображения выше в EmberJS. У меня есть страница с 2 фреймами, которые изначально скрыты.

Если нажать кнопку для кадра 1 или кадра 2, отображается соответствующий кадр. Это можно сделать с помощью обработчиков кликов и css show/hide.

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

Вот разные маршруты, которые я пытаюсь получить

/  (Picture 1)
/frame1 (Picture 2)
/frame2 (Picture 3)
/frame1/frame2  or /frame2/frame1 (Picture 4)

Я знаю, как получить первые 3 фотографии. А вот с четвертым сложно. Я думаю об использовании 2 ресурсов/маршрутов, соответствующих 2 комбинациям. Но создать ссылку также будет сложно, так как я не уверен, что обычный хелпер linkTo будет работать.

Итак, у меня действительно есть 2 проблемы -

  1. Как создать ссылки для картинки 4 в шаблоне. Нужно ли мне создавать собственный помощник?
  2. Покажите два открытых кадра, как на рисунке 4, используя маршруты.

Обновление 1 Вот демонстрация того, что я получил до сих пор.

Обновление 2 В этой обновленной версии , я получил все 4 комбинации URL-адресов для работы. Но ссылки будут вести только на /frame1 и /frame2. Вам нужно будет вручную установить адрес в строке /frame1/frame2 или frame2/frame1, чтобы увидеть, как это работает. Я думаю, что 2 вопрос решен, но нужно выяснить первый вопрос.


ember.js ember-router
person blessenm    schedule 06.11.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать параметры запроса https://github.com/emberjs/ember.js/pull/ 3182. Это функция, которую вы должны активировать https://github.com/emberjs/ember.js/blob/master/FEATURES.md

person Edu    schedule 06.11.2013
comment
Я обновил вопрос с помощью корзины того, что у меня есть до сих пор. Позвольте мне пройтись по вашим ссылкам и посмотреть, смогу ли я понять это. - person blessenm; 06.11.2013
comment
Спасибо, ваше предложение сработало. Я добавил ответ с кодом и образцом. - person blessenm; 07.11.2013

arrow_upward
1
arrow_downward

Я решил свой вопрос с помощью @Edu. query-params были выходом. URL-адреса не являются точными, как те, которые я указал выше. Они как

/#/?frame1
/#/?frame2
/#/?frame1&frame2
/#/?frame2&frame1

Это нормально, поскольку я просто хочу иметь возможность делиться состоянием просмотра приложения через URL-адрес. Вот демонстрационная ссылка

Вот код

JavaScript

Ember.FEATURES["query-params"] = true;
var App = Ember.Application.create();

App.Router.map(function() {
  this.route('app', { path: "/", queryParams: ['frame1', 'frame2'] });
});

App.AppRoute = Ember.Route.extend({
  renderTemplate: function(controller, context, queryParams) {
      if(queryParams.frame1) {
          this.render('frame1', { outlet: 'frame1' });
      }
      if(queryParams.frame2) {
          this.render('frame2', { outlet: 'frame2' });
      }
  }
});

Помощники LinkTo

{{#linkTo "app" frame1=true}}Frame 1{{/linkTo}}
{{#linkTo "app" frame2=true}}Frame 2{{/linkTo}}
person blessenm    schedule 07.11.2013