jeudi 13 octobre 2016

Ember component not holding parameter value after refresh

I have a component that takes in different properties for the object it represents. I pass in these parameters as you normally do for a component and it works perfectly. When I refresh though, only one of the values loses its value and becomes undefined. All the other parameters hold their values. Any idea why this is happening?

Here is my component declaration:


  


Here is my component template:


<div class="todo-list-completed">
    <div class="squaredThree">
        <input type="checkbox" id= name="check" value= onclick= checked/>
        <label for=></label>
    </div>
    <div class="todo-name-completed">
        <p></p>
    </div>
    <div class="todo-date-completed">
        <p>Completed</p>
    </div> 
    <div class="todo-member-completed">
        <p></p>
    </div>
</div>

    <div class="todo-list"  >
        <div class="squaredThree">
            <input type="checkbox" id= name="check" value= onclick=/>
            <label for=></label>
        </div>
        <div class="todo-name">
            <p></p>
        </div>
        
        <div class="todo-date">
            <p></p>
        </div>
        <div class="todo-member">
            <p></p>
        </div>
        
        
        <div class="todo-delete">
            <svg  class="icon-padding" width="25px" height="25px" viewBox="0 0 612 612" version="1.1" xmlns="http://ift.tt/nvqhV5" xmlns:xlink="http://ift.tt/PGV9lw">
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="x-button" fill="#cc1818">
                    <g id="Capa_1">
                        <g id="Cross">
                            <path d="M306,0 C137.012,0 0,136.992 0,306 C0,475.008 137.012,612 306,612 C474.988,612 612,475.008 612,306 C612,136.992 474.988,0 306,0 L306,0 Z M306,535.5 C179.45,535.5 76.5,432.55 76.5,306 C76.5,179.45 179.45,76.5 306,76.5 C432.55,76.5 535.5,179.45 535.5,306 C535.5,432.55 432.55,535.5 306,535.5 L306,535.5 Z M410.098,202.419 L409.581,201.902 C395.391,187.712 372.363,187.712 358.173,201.902 L306,254.076 L253.808,201.903 C239.617,187.712 216.61,187.712 202.4,201.903 L201.883,202.419 C187.693,216.61 187.693,239.617 201.883,253.827 L254.076,306 L201.884,358.192 C187.694,372.381 187.694,395.389 201.884,409.599 L202.401,410.116 C216.592,424.306 239.618,424.306 253.809,410.116 L306,357.925 L358.173,410.116 C372.363,424.306 395.371,424.306 409.581,410.116 L410.098,409.599 C424.288,395.409 424.288,372.381 410.098,358.192 L357.925,306 L410.116,253.808 C424.308,239.617 424.308,216.61 410.098,202.419 L410.098,202.419 Z" id="Shape"></path>
                        </g>
                    </g>
                </g>
            </g>
        </svg>
        </div>
        <div class="todo-member">
            <p></p>
        </div>
        
    </div>


Here is my component controller:

import Ember from 'ember';

export default Ember.Component.extend({
    classNameBindings: ['taskComplete'],
    user: Ember.inject.service(),
    //completed: false,
    taskComplete: false,
    taskAdmin: false,
    init: function() {
       this._super();
       this.setTaskStatus();
    },
    setTaskStatus: function() {
        this.set('taskComplete', this.get('complete'));
    },

    actions: {

            deleteTask: function(taskId) {
                this.store.findRecord('task', taskId).then(function(task) {
                task.destroyRecord(); 
                });
            },
            toggleTask: function() {
                self = this;
                this.set('taskComplete', !this.get('complete'));
                //this.toggleProperty('completed');
                this.store.findRecord('task', this.get('id')).then(function(currentTask) {
                    currentTask.set('completed', self.get('taskComplete'));
                    currentTask.save();
                })

            },
            hoverOver: function() {
                this.set('taskAdmin', true);
            },
            hoverOff: function() {
                this.set('taskAdmin', false);
            }
    }
});

Here is my task model:

export default DS.Model.extend({
    name: DS.attr('string'),
    description: DS.attr('string'),
    process: DS.belongsTo('process'),
    createdOn: DS.attr('date', {
        defaultValue() {
            return new Date();
        }
    }),
    dueDate: DS.attr('date'),
    completedOn: DS.attr('date'),
    onTime: DS.attr('boolean', { defaultValue: true }),
    completed: DS.attr('boolean'),
    optional: DS.attr('boolean'),
    step: DS.belongsTo('step'),
    firstInStep: DS.attr('boolean'),
    users: DS.hasMany('user'),
    admins: DS.hasMany('user', { inverse: 'tasksLead' }),
    members: DS.hasMany('user', { inverse: 'taskMember' })
});

Here is my user model:

export default Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
  name: Ember.computed('firstName', 'lastName', function() {
    return `${this.get('firstName')} ${this.get('lastName')}`;
  }),
  email: DS.attr('string'),
  password: DS.attr('string'),
  totalTeams: DS.attr('number'),
  totalProcesses: DS.attr('number'),
  completedProcesses: DS.attr('number'),
  totalTasks: DS.attr('number'),
  completedTasks: DS.attr('number'),
  teams: DS.hasMany('team'),
  processes: DS.hasMany('process'),
  tasks: DS.hasMany('task'),
  processesLead: DS.hasMany('process', { inverse: 'admins' }),
  teamsLead: DS.hasMany('team', { inverse: 'admins' }),
  tasksLead: DS.hasMany('task', { inverse: 'admins' }),
  processMember: DS.hasMany('process', { inverse: 'members' }),
  teamMember: DS.hasMany('team', { inverse: 'members' }),
  taskMember: DS.hasMany('task', { inverse: 'members' })
});




Aucun commentaire:

Enregistrer un commentaire