Ember.js-操作未接收参数
我的余烬应用程序中包含以下内容: 模板:Ember.js-操作未接收参数,ember.js,Ember.js,我的余烬应用程序中包含以下内容: 模板: ... <tr id="court-tpl"> <td class="name"> <input class="court-name" type="text" size="3" maxlength="3"> </td> <td class="placement"> <select class="court-placement"
...
<tr id="court-tpl">
<td class="name">
<input class="court-name" type="text" size="3" maxlength="3">
</td>
<td class="placement">
<select class="court-placement">
<option selected="selected" value="0">Exterior</option>
<option value="1">Indoor</option>
</select>
</td>
<td class="material">
<select class="court-material">
<option value="0">Muro</option>
<option selected="selected" value="1">Cristal</option>
</select>
</td>
<td class="single">
<select class="court-single">
<option value="0" selected="selected">No</option>
<option value="1">Sí</option>
</select>
</td>
<td>
<button {{action "deleteCourtRow" target="view" on="click"}} class="btn btn-small"><i class="icon-remove"></i> Eliminar</button>
</td>
</tr>
...
单击按钮时,控制台输出未定义。我试图获取event.target以删除包含内联表单的元素
知道发生了什么吗
编辑
控制器:
var ClubCourtsController = Ember.Controller.extend({
needs: ['currentClub'],
content: null,
addingCourts: false,
userCanAddCourts: function() {
if (this.get('addingCourts') || this.get('hasCustomCourts'))
return true;
return false;
}.observes('addingCourts', 'hasCustomCourts'),
hasCustomCourts: function() {
if (this.content.get('customCourts').get('length') > 0)
return true;
return false;
}.property('customCourts'),
saveCourts: function(data) {
// Scope reference
var that = this;
// Create a record for each row
$.each(data, function(i) {
var elId = data[0].elId;
var r = App.CustomCourt.createRecord();
r.set('name', data[0].name);
r.set('single', data[0].single);
r.set('crystal', data[0].crystal);
r.set('indoor', data[0].indoor);
r.set('club', that.content);
// Remove this row form when model is saved,
// as the table is watching for new courts automatically
r.one('didCreate', function() {
$('#' + elId).fadeOut('fast');
});
});
// Send new courts to back-end and update clubmeta: enable custom courts
this.content.get('clubmeta').set('customCourtsEnabled', true);
this.store.commit();
},
deleteCourt: function(court) {
court.deleteRecord();
court.get('transaction').commit();
}
});
module.exports = ClubCourtsController;
问题是这个表有两种类型的行:一种是显示现有记录法院的行,另一种是显示要创建记录法院的表单的行。有一个按钮可以动态添加更多行,因为一个俱乐部可以有多个球场
现有行上的Delete按钮从数据库中删除CustomCourt记录,这是在controller的deleteCourt中完成的
表单行上的Delete按钮(问题的目的地)应该只删除视图中的HTML元素,这就是我使用视图函数deleteCourtRow的原因。这些行的模型仅在按下“保存”按钮时创建。请参见saveCourts中的“循环”
无论如何,请随意推荐另一种方法,因为我是使用Ember的新手。操作助手不会将事件对象传递给处理程序方法。事实上,你不应该这样做。我猜你的桌子后面有一个ArrayController?您应该将模型对象传递给您的处理程序,以便将其从基础ArrayController中删除。在球场上反复显示支持控制器和把手模板的代码,您可以很快修复它。@mavilein我已更新了问题,请再次阅读,我不太确定该用例。您正在显示预定义的元素列表。用户可以删除元素。然后按下按钮后,剩余的元素会被保存?请看我刚刚上传的屏幕截图:
var ClubCourtsController = Ember.Controller.extend({
needs: ['currentClub'],
content: null,
addingCourts: false,
userCanAddCourts: function() {
if (this.get('addingCourts') || this.get('hasCustomCourts'))
return true;
return false;
}.observes('addingCourts', 'hasCustomCourts'),
hasCustomCourts: function() {
if (this.content.get('customCourts').get('length') > 0)
return true;
return false;
}.property('customCourts'),
saveCourts: function(data) {
// Scope reference
var that = this;
// Create a record for each row
$.each(data, function(i) {
var elId = data[0].elId;
var r = App.CustomCourt.createRecord();
r.set('name', data[0].name);
r.set('single', data[0].single);
r.set('crystal', data[0].crystal);
r.set('indoor', data[0].indoor);
r.set('club', that.content);
// Remove this row form when model is saved,
// as the table is watching for new courts automatically
r.one('didCreate', function() {
$('#' + elId).fadeOut('fast');
});
});
// Send new courts to back-end and update clubmeta: enable custom courts
this.content.get('clubmeta').set('customCourtsEnabled', true);
this.store.commit();
},
deleteCourt: function(court) {
court.deleteRecord();
court.get('transaction').commit();
}
});
module.exports = ClubCourtsController;