过去几个小时我一直在努力解决这个问题,我正在制作用于创建发票的 ember 应用程序。我正在使用 ember 组件(文本字段)使用键盘修改字段,但由于操作没有发送回相关 Controller ,我无法将记录保存在 focusOut 或 insertNewLine 上,并且没有任何反应。我正在使用:
Ember : 1.1.2
Ember Data : 1.0.0-beta.3
Handlebars : 1.0.0
jQuery : 1.9.1
这应该是这样的:https://dl.dropboxusercontent.com/u/7311507/embercomponent.png
问题似乎出在 Controller 或组件中,似乎我遗漏了什么。
console.log 函数在组件上被调用,sendAction 调用从不工作...
感谢您的帮助。
元素路线
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');
}
});
项目 Controller
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')
});
项目 Controller
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
});
项目模板
<script type="text/x-handlebars" data-template-name="items">
<!-- ... -->
<tbody>
{{#each itemController="item"}}
{{view App.ItemView }}
{{/each}}
</tbody>
<!-- ... -->
</script>
项目 View 模板
<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>
View /组件
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);
最佳答案
在模板中定义组件时,您应该定义将 Action 发送到哪里。
{{edit-item value=desc createItem='someactionoutside'}}
这是为了防止 Action 在不同的地方有不同的名字(因为这是一个组件,它在不同的地方可能有不同的含义)。它还避免了冲突 Action /触发 Action 。想想一个组件有两个实例的想法,每个实例都应该在 Controller 中触发不同的操作
{{edit-item value=desc createItem='createUser'}}
{{edit-item value=desc createItem='createShoppingCart'}}
在你的情况下你可以写
{{edit-item value=desc createItem='createItem'}}
在你的组件中你会调用
this.sendAction('createItem', param1, param2, ....);
如果您不关心它像组件一样自包含,您可能只想使用 View 而不是组件。您可以将其注册为助手,它看起来也一样漂亮。
Em.Handlebars.helper('edit-item', Em.View.extend({
templateName: 'some_template',
actions: function(){
// etc etc
}
}));
{{edit-item}}
关于javascript - Ember 组件 sendAction() 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20108386/