几周以来,我一直在尝试学习 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
循环中单击任何“类组”记录。
例如,用户单击“Class 1”,它有一个动作调用isActiveTog
,传入 ID = 123。我希望我在控制器中的动作将 ClassGroup[123][isActive] 的值从 0 切换到 1,反之亦然反之亦然。
我可以说我的控制器被正确调用,因为我可以放入{{classCount}}
我的模板并在输出中看到“3”。因此,问题是我无法找到一种方法来切换控制器中的值。
如何使用this.store.find()
搜索classgroup
ID 等于传递给操作的任何内容的行,然后访问该类记录的 isActive 值。然后我需要使用this.store.set()
写回模型。