Adding or Removing Numbers from an Array using Ember

Vote count:

0

I recently started working on a project which requires that I learn how to use Ember.js, so for the past few weeks I have been trying to understand the syntax and inner workings of the framework/MVC. Let me begin by showing you my models.

var ClassGroup = DS.Model.extend({
    className: DS.attr('string'),
    isActive: DS.attr('boolean'),
    isExpanded: DS.attr('boolean'),
    students: DS.hasMany('Students',{async:true}),
    isSelected: DS.hasMany('Students',{async:true})
});

ClassGroup.FIXTURES = [
    {
        id: 123,
        className: 'Class 1',
        isActive: true,
        isExpanded: false,
        students: [11, 22, 33, 44, 55],
        isSelected: [11, 22, 33, 44, 55]
    },
    {
        id: 456,
        className: 'Class 2',
        isActive: false,
        isExpanded: false,
        students: [66, 77, 88, 99],
        isSelected: [66, 88, 99]
    },
    {
        id: 789,
        className: 'Group 1',
        isActive: false,
        isExpanded: false,
        students: [22, 77],
        isSelected: []
    }
];

export default ClassGroup;

And...

var Students = DS.Model.extend({
    first: DS.attr('string'),
    last: DS.attr('string'),
    classes: DS.hasMany('classgroup',{async:true}),
    isSelected: DS.hasMany('classgroup',{async:true})
});

Students.FIXTURES = [
    {
        id: 11,
        first: 'Student',
        last: 'One',
        classes: [123],
        isSelected: [123]
    },
    {
        id: 22,
        first: 'Student',
        last: 'Two',
        classes: [123, 789],
        isSelected: [123]
    },
    {
        id: 33,
        first: 'Student',
        last: 'Three',
        classes: [123],
        isSelected: [123]
    },
    {
        id: 44,
        first: 'Student',
        last: 'Four',
        classes: [123],
        isSelected: [123]
    },
    {
        id: 55,
        first: 'Student',
        last: 'Five',
        classes: [123],
        isSelected: [123]
    },
    {
        id: 66,
        first: 'Student',
        last: 'Six',
        classes: [456],
        isSelected: [456]
    },
    {
        id: 77,
        first: 'Student',
        last: 'Seven',
        classes: [456, 789],
        isSelected: []
    },
    {
        id: 88,
        first: 'Student',
        last: 'Eight',
        classes: [456],
        isSelected: [456]
    },
    {
        id: 99,
        first: 'Student',
        last: 'Nine',
        classes: [456],
        isSelected: [456]
    }
];

export default Students;

I'm not sure if this is the best way to go about doing this, but I store a students array in my ClassGroup model, and a classes array in my Students model. I am basically storing the same data in both models, just in different ways. Each class has an array containing the IDs of all students in that class, and each students contains an array of all the classes in which he/she belongs to.

There is also an isSelected array in both models, and that is the array that I am dealing with at the moment.

Here is what I am trying to accomplish:

I have a list of classes. Under each class is a list of students with a checkbox by each student name. A checked checkbox means that that student isSelected for that class. Thus, checking a checkbox will need to cause the ID for that student to be added to the isSelected array for the class, as well as the ID for the class to be added to the isSelected array for the student. I am not sure how much of this will automatically be accomplished by Ember what with the hasMany's that I've added to the models.

Let me show you my code. Here are my controllers:

var ClassGroupsController = Ember.ArrayController.extend({
    itemController: 'classgroup',
    classCount: function(){
        return this.get('length');
    }.property('@each')
});

export default ClassGroupsController;

var ClassGroupController = Ember.ObjectController.extend({
    actions: {
        selected: function(){
            //console.info("You selected: "+ this.get('className'));
            this.toggleProperty('isActive');
            //console.info("My isActive state is now: " + this.get('isActive'));
        },
        selectAll: function() {
            console.log("SELECTING ALL STUDENTS:");
        },
        expanded: function() {
            this.toggleProperty('isExpanded');
        },
        selectedStudent: function(){
            this.toggleProperty('isSelected');
        },
        selectStudent: function() {
            console.log("Selected Student");
            console.log(this.get('student.id'));
            this.store.removeItem('selected');
        }
    }
});

export default ClassGroupController;

Here is the relevant part of my handlebars file:

<div id="classGroupMenu">
    <ul class="specialtyMenu manageMenuWidth" id="classGroup">
        {{#each}}
            <li id="c_{{unbound this.id}}" class="classMenu manageMenuWidth">
                {{#view 'selectall'}}{{input type="checkbox"}}{{/view}}
                {{#view 'classgroup' classBinding="controller.content.isActive:activeSelection isExpanded:classLayoutOpen:classLayoutClosed"}}{{classCount}}{{className}}{{/view}}
                {{#view 'toggleclass' classBinding="controller.content.isExpanded:togControlOpen:togControlClosed"}}{{/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}}">
                        {{#view 'student' classBinding="controller.content.isSelected:studentChecked:studentUnChecked"}}
                            {{last}}, {{first}}
                        {{/view}}
                    </li>
                {{/each}}
            </ul>
        {{/each}}
    </ul>
</div>

And finally, here is the view I have:

//Using this to toggle the class menu on and off

var view = Ember.View.create({
    templateName: 'student',
    name: 'Student'
});

export default Ember.View.extend({
    tagName: 'span',
    classNames: ['studentChk'],
    click: function(evt) {
        console.log("IN VIEW: Student");
        this.get('controller').send('selectStudent');

        /*var tog_sa_id = $(evt.currentTarget).siblings('span.classSA');
        console.log(tog_sa_id);
        var url = '/assets/images/sel-active.png';
        $(tog_sa_id).css('background', 'url(' + url + ')');*/
    }
});

I don't think I need to include the other views or my router, but if you think it would help, let me know and I will include them.

The Long Story Short:

Now that I've posted my code, let me simplify things a bit and show you what exactly I'm trying to do:

In my handlebars template I have the following line (also found above):

{{#view 'student' classBinding="controller.content.isSelected:studentChecked:studentUnChecked"}}
    {{last}}, {{first}}
{{/view}}

The CSS for the studentChecked and studentUnChecked change a background-image which makes it appear like a checkbox. So it's not literally a checkbox which we are dealing with; I apologize if that was misleading.

Upon clicking on this student view, I run this on the click event:

this.get('controller').send('selectStudent');

Which runs this function in my controller:

selectStudent: function() {
    console.log("Selected Student");
    console.log(this.get('student.id'));
    this.store.removeItem('selected');
}

When calling this function in my controller, I would like to be able to pass in the Student's ID, and then either add or remove that Student ID from the isSelected array. I will also need to keep the student model's isSelected array updated by adding or removing the Class ID.

What kind of functions do I have access to that can help me alter the contents of these arrays? I am very new to Ember, so I am looking for explanations in the simplest of terms. I appreciate you taking the time to read my question; any and all suggestions/comments would be a tremendous help for us.

asked 1 min ago

Joe Majewski

390