Comment lier la valeur d’entrée js dans ember?

J’ai un composant ember qui a une zone de saisie html comme,

À partir de mon composant, je déclenche une action en entrant dans cette zone de recherche avec une valeur comme,

 App.TopBarComponent = Ember.Component.extend({ keyUp: function (event) { var self = this; if (event.keyCode == 13) { var search_text = $('#searchbox').val(); //No I18N self.sendAction('searchEnterAction', search_text); //No I18N } } });

J’ai une action en mixin. Dans cette action, je ne fais que passer à un autre itinéraire.

Comme ça,

 searchEnterAction: function (search_text) { var self = this; self.transitionTo('search', search_text); }

Dans mon Router.js,

 this.resource('search', {path: '/:search_value'}); //No I18N

J’ai des valeurs dynamics en tant que paramètre de cette route.

Lorsque je suis entré à partir de cette zone de saisie, cette valeur d’entrée est définie comme une valeur dynamic pour cet itinéraire.

Mais, lorsque j’actualise cette page avec la même valeur de route, cette valeur d’entrée ne se lie pas à la valeur de route dynamic. Je dois lier cette valeur de zone d’entrée à ce qui se trouve dans cette route.

Comment lier cette valeur d’entrée html à la route dynamic de braise? S’il vous plaît aidez-moi à sortir de cela.

Je partage le lien Jsbin pour votre référence.

Étape de transition ( avant de rafraîchir )

Après l’actualisation de la page ( après l’actualisation )

JSBIN

Voici la démo de travail.

Vous devez déclarer une propriété sur le contrôleur qui contiendra le texte de recherche.

 App.ApplicationController = Em.Controller.extend({ searchInput: '' });

Liez la valeur searchInput à la propriété de votre composant. Lorsque le composant est rendu, utilisez la propriété de composant pour mettre à jour la valeur d’entrée de la recherche. Ajoutez également un observateur au searchText du composant. Cet observateur mettra à jour sa valeur lorsque le searchInput du contrôleur changera. Utilisez cet observateur pour mettre à jour la valeur de la zone de saisie. Ceci sera utilisé lorsque le texte de recherche est défini sur le contrôleur via l’URL.

 {{top-bar searchEnterAction='searchEnterAction' searchText=searchInput}} App.SearchRoute = Em.Route.extend({ model: function(params) { this.controllerFor('application').set('searchInput', params.search_value); } }); App.TopBarComponent = Ember.Component.extend({ searchText: '', setup:function() { $('#searchbox').val(this.get('searchText')); }.on('didInsertElement'), updateValue:function() { $('#searchbox').val(this.get('searchText')); }.observes('searchText'), keyUp: function (event) { if (event.keyCode == 13) { var search_text = $('#searchbox').val(); console.log(search_text); this.sendAction('searchEnterAction', search_text); } } });

Quelques problèmes empêchent que cela fonctionne correctement.

La première est que l’entrée dans votre composant doit être liée à la valeur entrée dans la zone de recherche. Cela peut être fait en passant une propriété search_value dans votre composant et en liant l’entrée comme ceci:

{{input type="text" placeholder="Search" id="searchbox" value=search_value}}

Le deuxième problème est que votre itinéraire de recherche doit pouvoir transmettre cette valeur search_value au composant. Pour résoudre ce problème, vous devez déterminer ce qui convient à la restructuration de vos modèles. Voici une option qui déplace la zone de recherche initiale dans un modèle d’ index distinct, puis ajoute une nouvelle zone de recherche liée au modèle de search :

JSbin