web-dev-qa-db-fra.com

Comment gérer la soumission de formulaires dans ember.js?

J'ai un formulaire avec différents contrôles. Lorsque le bouton d'envoi est enfoncé, une demande ajax est envoyée au serveur qui répond avec des données json que je souhaite afficher correctement. C'est une chose ponctuelle, aucune liaison, etc. n'est nécessaire, les données sont lues une seule fois et jetées par la suite. Je peux penser à quelques façons de faire cela en combinant les vues et jquery mais quelle est la façon appropriée de le faire dans Ember.js?

Plus précisement:

1) Comment puis-je communiquer les paramètres du formulaire de la vue au contrôleur qui va gérer l'événement de soumission?

2) Si je devais créer un itinéraire pour représenter l'état du formulaire soumis, comment puis-je sérialiser les paramètres dans un chemin d'accès qui a du sens pour Ember? Est-ce que c'est possible?

javascriptjqueryember.js
25
kliron

Puisque personne n'a encore répondu, j'ai créé un violon montrant comment je le ferais.

Voici l'approche de base:

  1. Je voudrais configurer un contrôleur avec un nouveau modèle (== vide).
  2. Utilisez les liaisons pour synchroniser les valeurs des éléments de formulaire avec le modèle du contrôleur.
  3. Créez une action qui prend le modèle mis à jour et fait ce que vous voulez avec lui ( cela remplace le formulaire traditionnel d'envoi ).

L'approche est donc fondamentalement différente de la manière traditionnelle de gérer les formulaires de cette façon:

  1. Il n'y a aucun élément de formulaire HTML , car il n'est pas nécessaire.
  2. Les données ne sont pas soumises automatiquement au serveur, au lieu de cela, vous les enverriez/soumettriez manuellement via une logique javascript . À mon humble avis, c'est un avantage car vous pourriez effectuer une logique supplémentaire avant ou après la soumission des données au serveur.
  3. Cela fonctionne bien avec les approches REST-API comme ember-date ou ember-epf :-)

L'exemple montre un formulaire (juste conceptuellement, car il n'y a pas d'élément de formulaire HTML) pour entrer un prénom et un nom. Les valeurs saisies sont synchronisées avec le modèle et vous pouvez "effectuer une soumission".

Le code JS: 

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

App.Person = Ember.Object.extend({
    firstName : "",
    lastName : ""
});

App.IndexRoute = Ember.Route.extend({
  model: function(){
      return App.Person.create()
  },
    setupController : function(controller, model){
        controller.set("model", model);
    }
});

App.IndexController = Ember.ObjectController.extend({
    submitAction : function(){
        // here you could perform your actions like persisting to the server or so
        alert("now we can submit the model:" + this.get("model"));
    }
});

Le modèle montrant l'utilisation des liaisons de valeurs: 

<script type="text/x-handlebars" data-template-name="index">
  <h2>Index Content:</h2>
  {{input valueBinding="model.firstName"}}
  {{input valueBinding="model.lastName"}}
    <button {{action submitAction target="controller"}}>Pseudo Submit</button>
  <p>{{model.firstName}} - {{model.lastName}}</p>
</script>
36
mavilein