Объедините linkTo и помощников действий в Ember.js

Вместо @JsonUnwrapped вы можете использовать @JsonAnyGetter и @JsonAnySetter следующим образом:

public class Foo {

   private OffsetDateTime lastModifiedTime;
   private HashMap<String, String> additionalProperties = new HashMap<String, String>();

   public Foo() {
      super();
      lastModifiedTime = OffsetDateTime.now();
   }

   public void setLastModifiedTime(OffsetDateTime newTime) {
      this.lastModifiedTime = newTime;
   }

   public OffsetDateTime getLastModifiedTime() {
      return this.lastModifiedTime;
   }

   @JsonAnyGetter
   public Map<String, String> any() {
      return this.additionalProperties;
   }

   @JsonAnySetter
   public void set(String name, String value) {
      this.additionalProperties.put(name, value);
   }
}
29
задан Daniel Kmak 8 July 2017 в 10:07
поделиться

8 ответов

Аддон Ember Link Action

Недавно я разработал этот аддон для решения этой проблемы с Ember 2.0 - 2.14+ совместимым стилем ( 1.13 также работает! ) и использование закрывающих действий / названий действий. Это нормально для SEO!

Установить аддон

ember install ember-link-action

Использование

Вы можете передать действие закрытия как параметр invokeAction параметру {{link-to}} компонент:

{{#link-to 'other-route' invokeAction=(action 'testAction')}}
  Link to another route
{{/link-to}}

Вы также можете использовать имя действия вместо действия закрытия:

{{#link-to 'other-route' invokeAction='testAction'}}
  Link to another route
{{/link-to}}

Для передачи параметров в действие вы можете использовать:

{{#link-to 'other-route' invokeAction=(action 'testAction' param1 param2)}}
  Link to another route
{{/link-to}}

Совместимость

Автоматизированный набор тестов подтверждает, что аддон работает с 1.13 до последних выпусков Ember 3.

Работает с выпуском, бета и канареечной версией Ember.

Аддон GitHub хранилище. Материалы приветствуются.

28
ответ дан Daniel Kmak 8 July 2017 в 10:07
поделиться

Обновление: См. Комментарий Майкла Ланга ниже для Ember 1.8.1+

Проблема с ответом Мыслика (вообще не используя link-to, а вместо этого используя action, а затем transitionToRoute), что бесполезно для SEO , поисковые роботы ничего не увидят.

Если вы хотите, чтобы то, на что указывает ваша ссылка, было проиндексировано, проще всего иметь там старый добрый <a href=x>. Лучше всего использовать link-to, чтобы URL-адреса ваших ссылок синхронизировались с URL-адресами вашего маршрута. Решение, которое я использую, дает как действие для выполнения работы, так и удобный link-to для индексации страниц.

Я переопределяю некоторые функции из Ember.LinkView:

Ember.LinkView.reopen({
  action: null,
  _invoke: function(event){
    var action = this.get('action');
    if(action) {
      // There was an action specified (in handlebars) so take custom action
      event.preventDefault(); // prevent the browser from following the link as normal
      if (this.bubbles === false) { event.stopPropagation(); }

      // trigger the action on the controller
      this.get('controller').send(action, this.get('actionParam'));
      return false; 
    }           

    // no action to take, handle the link-to normally
    return this._super(event);
  }
});

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

<span {{action 'view' this}}>
  {{#link-to 'post' action='view' actionParam=this}}
    Post Title: {{title}}
  {{/link-to}}
</span>

В контроллере :

App.PostsIndexController = Ember.ArrayController.extend({
  actions: {
    view: function(post){
      this.transitionToRoute('post', post);
    }
  }
}

Таким образом, когда я кеширую отрендеренную копию страницы и передаю ее индексирующему боту, он увидит реальную ссылку с URL-адресом и последует по ней.

(обратите внимание также, что transitionTo в настоящее время устарела в пользу transitionToRoute)

18
ответ дан Noland 8 July 2017 в 10:07
поделиться

Ни одна из этих комбинаций не будет работать в Ember.js, но вам не нужно объединять этих двух помощников. Почему бы вам просто не использовать хелпер действий и позволить ему переходить к контроллеру или маршруту? Там вы можете использовать transitionToRoute в контроллере или transitionTo в маршруте.

Например, в контроллере вы можете иметь такой код:

App.PostsController = Ember.ArrayController.extend({
    clear: function () {
        // implement your action here
        this.transitionToRoute('index');
    }
});
17
ответ дан Myslik 8 July 2017 в 10:07
поделиться

Это хорошо работает в 1.6.0-бета.5:

<span {{action "someAction"}}>
  {{#link-to "some.route"}}
    Click Me
  {{/link-to}}
</span>

Ссылка произойдет, и затем щелчок всплывет до обработчика действий. Это задокументировано (хотя и косвенно) здесь .

Редактировать: исправлен синтаксис при открытии тега ссылки

10
ответ дан AWM 8 July 2017 в 10:07
поделиться

Имея ту же проблему, я нашел это простое решение:

{{#linkTo eng.rent class="external-button"}}<div class="internal-button" {{action "updateLangPath"}} >X</div>{{/linkTo}}

затем, управляя внешней кнопкой и внутренней кнопкой классов CSS в таблице стилей, я убедился, что «внутренняя кнопка» покрывал всю область "внешней кнопки"; таким образом, невозможно нажать на внешнюю кнопку, не нажимая на внутреннюю кнопку.

Это хорошо работает для меня; надеюсь, что это поможет ...

3
ответ дан Cereal Killer 8 July 2017 в 10:07
поделиться

Вот как я решил эту проблему в нашем демонстрационном приложении для книги O'Reilly Ember.js: https://github.com/emberjsbook .

Вы можете увидеть полный источник здесь: https://github.com/emberjsbook/rocknrollcall

В представлении:

{{#if artistsIsChecked}}
  {{#if artists.length}}
    <h3>Artists</h3>

    <ul class="search-results artists">
      {{#each artists}}
        <li><a {{action 'viewedArtist' this.enid }}>{{name}}</a></li>
      {{/each}}
    </ul>
  {{/if}}
{{/if}}

И контроллер :

App.SearchResultsController = Em.ObjectController.extend({
  actions: {
    viewedArtist: function(enid) {
      this.transitionToRoute('artist', enid);
    },
    viewedSong: function(sid) {
      this.transitionToRoute('song', sid);
    }
  },
  needs: ['artists', 'songs'],
  artistsIsChecked: true,
  songsIsChecked: true,
  artists: [],
  songs: []
});
3
ответ дан jdcravens 8 July 2017 в 10:07
поделиться

Мне нравится подход Cereal Killer за его простоту, но, к сожалению, для меня это проблема. Когда браузер переходит на другой маршрут, он перезапускает приложение Ember .

Начиная с Ember 2.6, используется следующий простой подход:

<span {{action 'closeNavigationMenu'}}> {{#link-to 'home' preventDefault=false}} Go Home {{/link-to}} </span>

Это обеспечивает следующее:

  • перемещается к route 'home'
  • действие 'closeNavigationMenu' вызывается
  • при наведении мыши, браузер отображает ссылку, по которой будет следовать (для SEO и лучшего UX)
  • навигация браузера не приводит к перезагрузке приложения Ember
7
ответ дан bargar 8 July 2017 в 10:07
поделиться

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

См. Здесь в руководстве Ember: http://emberjs.com/guides/routing/setting-up-a-controller/

. Это работает, только если вы хотите выполнить действие каждый раз при доступе к маршруту, в отличие от конкретных ссылок.

Обязательно добавьте строку controller.set('model', model); вместе со всем, что вы там вставили.

0
ответ дан pvans 8 July 2017 в 10:07
поделиться
Другие вопросы по тегам:

Похожие вопросы: