我一直在努力学习Ember的基础知识几个星期了，我目前遇到了一个问题，当它涉及到通过控制器中的一个动作来改变我的模型中的数据。
我发现的所有例子似乎都在使用一维夹具。我使用的固定装置看起来像这样:
App.ClassGroup = DS.Model.extend({
className: DS.attr('string'),
isActive: DS.attr('number'),
students: DS.hasMany('Students',{async:true}),
selected: DS.hasMany('Students',{async:true})
});
App.ClassGroup.FIXTURES = [
{
id: 123,
className: 'Class 1',
isActive: 1,
students: [11, 22, 33, 44, 55],
selected: [11, 22, 33, 44, 55]
},
{
id: 456,
className: 'Class 2',
isActive: 0,
students: [66, 77, 88, 99],
selected: [66, 88, 99]
},
{
id: 789,
className: 'Group 1',
isActive: 0,
students: [77, 22],
selected: []
}
];
App.Students = DS.Model.extend({
first: DS.attr('string'),
last: DS.attr('string'),
classes: DS.hasMany('ClassGroup')
});
App.Students.FIXTURES = [
{
id: 11,
first: 'Student',
last: 'One',
classes: [123]
},
{
id: 22,
first: 'Student',
last: 'Two',
classes: [123, 789]
},
{
id: 33,
first: 'Student',
last: 'Three',
classes: [123]
},
{
id: 44,
first: 'Student',
last: 'Four',
classes: [123]
},
{
id: 55,
first: 'Student',
last: 'Five',
classes: [123]
},
{
id: 66,
first: 'Student',
last: 'Six',
classes: [456]
},
{
id: 77,
first: 'Student',
last: 'Seven',
classes: [456, 789]
},
{
id: 88,
first: 'Student',
last: 'Eight',
classes: [456]
},
{
id: 99,
first: 'Student',
last: 'Nine',
classes: [456]
}
];
我的控制器是这样的:
var IndexController = Ember.ArrayController.extend({
actions: {
isActiveTog: function(id){
console.log(this);
console.log(this.store.get('model'));
var getter = this.get('classgroup');
console.log(getter);
}
},
classCount: function(){
return this.get('length');
}.property('@each')
});
export default IndexController;
这是我们的路由器:
import Students from "appkit/models/students";
import ClassGroup from "appkit/models/classgroup";
export default Ember.Route.extend({
model: function() {
return this.store.find('classgroup');
},
setupController: function(controller, model){
this._super(controller, model);
controller.set('students', this.store.find('students'));
controller.set('classgroup', this.store.find('classgroup'));
}
});
这是我们的车把模板中的each块(我删除了其余部分，因为它太笨重了):
{{#each classgroup}}
<li id="c_{{unbound this.id}}" class="classMenu manageMenuWidth">
<span class="classSA" id="c_{{unbound this.id}}_sas"><input type="checkbox" name="c_{{unbound this.id}}_chk" id="c_{{unbound this.id}}_chk" /></span>
<span id="c_{{unbound this.id}}_nam" {{bind-attr class=":classLayout isActive:activeSelection"}} {{action "isActiveTog" this.id on="click"}}>{{unbound this.className}}</span>
{{#view 'toggleclass'}}<span class="togControl" id="c_{{unbound this.id}}_tog"></span>{{/view}}
</li>
<ul id="c_{{unbound this.id}}_sts" class="students manageMenuWidth">
{{#each students}}
<li class="student" id="s_{{unbound this.id}}_c_{{unbound classgroup.id}}">
<span class="studentChk" id="s_{{unbound students.id}}_c_{{unbound classgroup.id}}_img">{{unbound this.last}}, {{unbound this.first}}</span>
<input type="checkbox" name="s_{{unbound students.id}}_c_{{unbound classgroup.id}}_chk" id="s_{{unbound students.id}}_c_{{unbound classgroup.id}}_chk" />
</li>
{{/each}}
我尽可能多地包含了我们的代码，因为我对Ember仍然很陌生，我想确保你有你需要的所有信息来帮助回答这个问题，即使这意味着给你太多。
这样你就不会挖掘太多了，这里有一些更多的信息。在车把模板中有一行{{action "isActiveTog" this。id on="click"}}
这将调用控制器isActiveTog中的一个函数，我们希望使用该函数来切换模型中isActive的值，以便在each循环中单击任何"classgroup"记录。
例如，用户点击"Class 1"，它对isActiveTog有一个动作调用，传入ID = 123。我希望控制器中的动作将ClassGroup[123][isActive]的值从0切换到1，反之亦然。
我可以说我的控制器被正确调用，因为我能够将{{classCount}}放在我的模板中，并在输出中看到一个"3"。因此，问题是我无法找出一种方法来切换控制器中的值。
我如何使用this.store.find()来搜索classgroup行，其ID等于传递给动作的任何内容，然后访问该类记录的isActive值。然后我需要使用this.store.set()写回模型。
看起来你来自jQuery背景，因为你如何试图通过模板将ClassGroup记录的id嵌入到DOM中(当然这没有什么错，因为这就是我在做什么，当我第一次开始使用Ember来自jQuery沉重的背景)。如果你注意到自己在做这件事，你可能正在以一种非ember的方式做某事。通常，只有在需要集成第三方jQuery库时，才应该通过ID访问DOM元素。
好了，现在你知道要注意什么了，我们应该如何完成你想要的烬方式?
可能有几种方法去做它，但对我来说效果很好的是为每个单独的ClassGroup扩展ObjectController而不是ArrayController创建另一个控制器。也就是
ClassGroupsController (ArrayController) -> ClassGroupController (ObjectController)
注意数组控制器是复数形式的。这允许你管理每个单独ClassGroup记录的状态，因为每个ClassGroup记录现在有自己的控制器和自己的视图。
所以首先创建一个数组控制器来管理ClassGroups的集合:
App.ClassGroupsController = Ember.ArrayController.extend({
});
ClassGroupController (Object)应该有一个监听点击事件的视图。当我们得到一个点击事件时，我们在控制器(ClassGroupController)上触发一个名为selected的动作。
App.ClassGroupView = Ember.View.extend({
templateName: 'classGroup',
/*
By specifying the tagName for this view we are telling ember
we want to wrap the view in a <tr> element. This is because
each classGroup is going to be a row in our table. By default
each view is wrapped in a <div>
*/
tagName: 'tr',
/*
This is the click handler that is called whenever the user
clicks on this view (in this case one of our <tr> elements
that is displaying our ClassGroup Model for us. The event
parameter is the jQuery event object.
*/
click: function(event){
/*
We want to forward this event to the controller where
we can do some logic based on the fact that it was clicked.
*/
this.get('controller').send('selected');
}
});
现在我们为ClassGroup创建ObjectController，它正在等待并侦听当用户单击单个ClassGroup时从ClassGroupView发送的selected动作。
App.ClassGroupController = Ember.ObjectController.extend({
actions:{
/*
This is the action we received from our view which was
based on the user clicking on one of the <li> elements
representing a ClassGroup Model
*/
selected: function(){
console.info("You selected: " + this.get('className'));
/*
Now we can easily toggle the isActive state of our model
*/
this.toggleProperty('isActive');
console.info("My isActive state is now: " + this.get('isActive'));
}
}
});
现在我们需要将其连接到模板中。
{{#each itemController="classGroup"}}
{{view App.ClassGroupView}}
{{/each}}
注意我是如何指定我想使用classGroup作为我的ArrayController的itemController的。这里我直接在模板中指定它。你也可以使用itemController属性在ArrayController中指定它。例如:
App.ClassGroupsController = Ember.ArrayController.extend({
itemController: 'classGroup'
});
http://jsfiddle.net/NQKvy/872/
您可以通过id找到记录并使用
修改它this.store.find('classgroup', id).then(function (classgroup) {
classgroup.toggleProperty('isActive');
});
然而，在你的例子中，你真的不需要，因为你可以只传递记录
所以在视图中使用
{{action "isActiveTog" this on="click"}}
而不是this.id然后直接在控制器
isActiveTog: function(classgroup){
classgroup.toggleProperty('isActive');
// classgroup.save();
}