2016-07-07 1 views
0

У меня есть контроллер EmberJS, который имеет следующее вычисленное свойство:EmberJS вычисляемых свойств на основе массив не работает

hasSelectedRequirements: Ember.computed('selectedRequirements.[]', function() { 
    console.log("this should get printed but it doesn't"); 
    return this.get('selectedRequirements').length > 0; 
}), 

, который устанавливает логический флаг, я использую в качестве шаблона для условного отображения HTML.

У меня также есть кнопка, которая при нажатии, принимает данные формы и помещает элемент на массив selectedRequirements путем вызова действия addRequirement

actions: { 
    addRequirement() { 
     ... 
     // extract data from form and create the requirement variable 

     var selectedRequirements = this.get('selectedRequirements'); 
     selectedRequirements.push(requirement); 
     this.set('selectedRequirements', selectedRequirements); 

     console.log(this.get('selectedRequirements')); // does print as expected 
    } 
} 

Если изменить функцию addRequirement этого вместо, то обработчик функция hasSelectedRequirements, вычисленных в отеле работает как и ожидалось, и console.log оператор работает:

actions: { 
    addRequirement() { 
     ... 
     // extract data from form and create the requirement variable 

     var selectedRequirements = this.get('selectedRequirements'); 
     selectedRequirements.push(requirement); 

     // create a new, local array 
     var arr = new Array(); 
     arr.push(1); 

     this.set('selectedRequirements', arr); 

     console.log(this.get('selectedRequirements')); // does print as expected 
    } 
} 

кажется, что вычисляемые свойства Ember полагаются на массив, который наблюдается будучи Комплексы сильно различный массив?

Проблема заключается в том, что вычисленное свойство не распознает, что элемент был добавлен в выбранный массивRequirements, а функция вычисленного свойства никогда не вызывается (оператор console.log никогда не запускается). Почему вычислимое свойство не распознает, что выбран массив selectedRequirements и как я могу исправить код вычисленного кода?

+1

Почему не вы просто используете 'hasSelectedRequirements: Ember.computed.bool ('selectedRequirements.length')'? Кстати, используйте 'pushObject', а не' push'. –

ответ

2

Использование pushObject как this.get('selectedRequirements').pushObject(obj);

+0

Метод pushObject в классе Ember MutableArray - именно то, что я искал. Я не могу сказать, как долго я искал и не мог найти ответ на эту проблему. Я знал, какова основная проблема, но не решение Ember. Надеюсь, этот пост помогает другим. – lkgarrison

+0

@lkgarrison Прохладный. Поэтому, если эта проблема решена, пожалуйста, любезно согласитесь с моей записью в качестве ответа –

1

кажется, что вычисляемые свойства Ember (по крайней мере, наблюдая с помощью массива. [] Синтаксис) требуется новый массив для того, чтобы признать изменения. Таким образом, лучшее решение, которое я нашел, чтобы создать копию массива с помощью среза:

actions: { 
    addRequirement() { 
     ... 
     // extract data from form and create the requirement variable 

     var selectedRequirements = this.get('selectedRequirements'); 
     selectedRequirements.push(requirement); 
     this.set('selectedRequirements', selectedRequirements.slice(0)); 

     console.log(this.get('selectedRequirements')); // does print as expected 
    } 
} 

Это гарантирует, что hasSelectedRequirements вычислен свойство устанавливается соответствующим образом каждый раз, когда действие addRequirement называется