Le composant Ember sendAction () ne fonctionne pas
j'ai été aux prises avec ce depuis quelques heures, je fais une braise d'application pour la création d'une facture. je suis à l'aide de braise composant (textfield) pour modifier les champs à l'aide du clavier, mais puisque les actions ne sont pas de l'envoi de retour à la manette, je ne peut pas enregistrer les enregistrements sur focusOut ou insertNewLine et rien ne se passe. je suis à l'aide de :
Ember : 1.1.2
Ember Data : 1.0.0-beta.3
Handlebars : 1.0.0
jQuery : 1.9.1
ce qui est censé ressembler à ceci: https://dl.dropboxusercontent.com/u/7311507/embercomponent.png
Le problème semble se situer soit dans le contrôleur ou le composant, il semble que je suis absent quelque chose.
la console.la fonction log est appelée sur le composant, le sendAction appel ne fonctionne jamais...
Merci pour l'aide.
ItemsRoute
App.ItemsRoute = Ember.Route.extend({
renderTemplate: function() {
//Render default outlet
this.render();
//render extra outlets
this.render("client", { outlet: "client", into: "application"});
},
model: function() {
return this.store.find('item');
}
});
ItemsController
App.ItemsController = Em.ArrayController.extend({
actions: {
createItem: function () { //NEVER GETS CALLED FROM COMPONENT
var title = "Nouvel élément"
//Create the new Todo model
var item = this.store.createRecord('item', {
desc: title,
qty: 1,
price: 0
});
//Save the new model
item.save();
}
},
totalCount: function(){
var total = 0;
this.get('model').forEach(function(item){
total += item.get('totalprice');
});
return total;
}.property('@each.qty', '@each.price')
});
ItemController
App.ItemController = Em.ObjectController.extend({
didInsertElement: function(){
this.$().focus();
},
actions: {
testAction: function(){ //NEVER GETS CALLED FROM COMPONENT
console.log("controller recieved call for testAction");
},
saveItem: function(value) {
this.get('model').save();
},
removeItem: function() {
var item = this.get('model');
item.deleteRecord();
item.save();
},
},
isHovering: false
});
Éléments De Modèle
<script type="text/x-handlebars" data-template-name="items">
<!-- ... -->
<tbody>
{{#each itemController="item"}}
{{view App.ItemView }}
{{/each}}
</tbody>
<!-- ... -->
</script>
ItemView modèle
<script type="text/x-handlebars" data-template-name="item">
<td class="desc">{{edit-item value=desc}}</td>
<td class="qty">{{edit-item-number value=qty }}</td>
<td class="">{{edit-item-number step="25" value=price}}</td>
<td class="totalprice">
{{ totalprice }}
<div class="delete-item" {{bindAttr class="isHovering"}} {{action "removeItem" on="click"}}>
<i class="icon-trash"></i>
</div>
</td>
</script>
Vues /Composants
App.ItemView = Em.View.extend({
templateName: "item",
tagName: "tr",
mouseEnter: function(event) {
this.get('controller').set('isHovering', true);
},
mouseLeave: function(event) {
this.get('controller').set('isHovering', false);
}
});
App.EditItem = Em.TextField.extend({
becomeFocused: function() {
this.$().focus();
}.on('didInsertElement'),
insertNewline: function(){
console.log('Tried to insert a new line'); //WORKS
this.triggerAction('createItem'); //DOESN'T WORK
},
focusOut: function(){
console.log('Focused the Field Out') //WORKS
this.triggerAction('testAction', this); //DOESN'T WORK
}
});
App.EditItemNumber = App.EditItem.extend({
becomeFocused: null,
attributeBindings: ["min", "max", "step"],
type: "number",
min: "0"
});
Ember.Handlebars.helper('edit-item', App.EditItem);
Ember.Handlebars.helper('edit-item-number', App.EditItemNumber);
source d'informationauteur Wilhearts
Vous devez vous connecter pour publier un commentaire.
Vous devez définir l'endroit où l'action sera envoyé lors de la définition d'un composant dans le modèle.
c'est dans le cas où l'action a un nom différent à des endroits différents (puisque c'est un composant, il peut avoir des significations différentes dans des lieux différents). Il permet aussi d'éviter de heurter les actions/actions déclenchées. Penser à l'idée d'avoir deux instances d'un composant, et chacun doit déclencher une action différente dans le contrôleur
dans votre cas, il vous suffit d'écrire
Et à l'intérieur de votre composant que vous appelez
Si vous ne se soucient pas qu'il soit autonome comme un composant, vous pouvez utiliser un point de vue et non un composant. Vous pouvez l'enregistrer en tant qu'assistant, et il serait tout aussi jolie.
Comme un complément à la belle réponse par @Kingpin2k vous pouvez également définir votre nom de script au sein de la composante si c'est toujours le même et vous souhaitez vous simplifier la syntaxe de l'inclusion de votre composant. ie.
Dans cet exemple, le composant utilise le parent contrôleurs transitionToRoute méthode pour changer de route, même si le composant ne peut pas être un bouton/lien. Par exemple, la navigation sur le changement d'un composant contenant plusieurs sélectionner les entrées, ou simplement en changeant d'itinéraire à partir de l'intérieur d'une composante en général.