Ember.js ancre de lien

Le problème est que la Braise utilisé, la valeur de hachage de la partie de l'URL pour stocker l'état actuel de votre application. Spontanément, je vois deux solutions possibles.

1 - *Ne laissez pas de Braise utiliser le hachage partie de votre Url.* Par conséquent, l'utilisation de la HTML5 histoire emplacement de la mise en œuvre de Braise. Cela se traduira dans les Url comme yourdomain.com/users/1/ sans #.

App.Router.reopen({
  location: 'history'
});

2 - N'utilisez pas cette technique. Au lieu d'utiliser jQuery pour faire défiler la partie pertinente. Cela pourrait ressembler à ceci:

<ul class="nav navbar-nav pull-right">
  <li><a {{action jumpToLogin}}>Signup</a></li> 
  <li>{{#linkTo 'about'}}About{{/linkTo}}</li>
</ul>

Et dans la vue correspondante:

App.YourView = Ember.View.extend({
  jumpToLogin : function(){
    $('html, body').animate({
        scrollTop: $("#login").offset().top
    }, 2000);
  }
});

Cela peut sembler beaucoup de code pour cette petite fonctionnalité, mais je suppose que c'est une belle expérience de l'utilisateur le droit? En fait, vous pouvez améliorer cette approche par l'extraction de cette logique dans un mixin, de sorte que vous n'avez pas à répéter encore et encore:

App.ScrollToMixin = Ember.Mixin.create({
  scrollDuration : 2000, //default
  scrollTo : function(selector){
    $('html, body').animate({
        scrollTop: $(selector).offset().top
    }, this.get("scrollDuration");
  )
});
//mix it into your View
App.YourView = Ember.View.extend(App.ScrollToMixin, {});

Et à utiliser dans votre modèle:

<ul class="nav navbar-nav pull-right">
  <li><a {{action scrollTo "login"}}>Signup</a></li> 
  <li>{{#linkTo 'about'}}About{{/linkTo}}</li>
</ul>

PS: je n'ai pas testé le code avec le mixin. Je ne suis pas absolument sûr que la Chaîne "login" est passée à l'action gestionnaire exactement comme ça. Vous aurez donc à tester 🙂

OriginalL'auteur

J'ai eu ce travail dans la Braise avec le action simple approche de kroovy de réponse.

Depuis Braise a changé son API, j'ai dû modifier kroovys approche à peu.

Deux choses ont changé:

1. Événements dans une Braise.Itinéraire sont obsolètes et remplacés par des actions de Braise.Contrôleur de
2. au lieu de transitionTo vous devez utiliser transitionToRoute

Voici comment je l'ai eu à travailler dans la Braise de la Version 1.7.0

Braise Guidon-Modèle nouveau.hbs

{{!-- Navigation -- }}
<ul>
 <li {{action 'goToLink' "new" "#part1"}}>Part 1</li>
 <li {{action 'goToLink' "new" "#part2"}}>Part 2</li>
</ul>

{{!-- content -- }}
<div id="part1" class="row">...</div>
<div id="part2" class="row">...</div>

Braise App.Contrôleur De NewController.js

App.NewController = Ember.ArrayController.extend({

 actions: {

    goToLink: function(item, anchor) {
        console.log('NewController > goToLink');
        var $elem = $(anchor);
        var $scrollTo = $('body').scrollTop($elem.offset().top);

        this.transitionToRoute(item.route).then( $scrollTo);
    }
}
});

OriginalL'auteur