Ember 组件在生产中崩溃

Question

我在生产环境中构建 ember 应用时遇到问题，使用 ember serve 所有组件运行良好，但是当我使用 Ubuntu 16.04 将其部署到 Digital Ocean droplet 中时，应用因一个组件而崩溃。

这里有崩溃组件的代码：

import Ember from 'ember';
import pagedArray from 'ember-cli-pagination/computed/paged-array';

export default Ember.Component.extend({
  init(){
    this._super(...arguments);
    this.send('fillQuestions');
  },
  didDestroyElement(){
    this.send('reset');
  },
  last: false,
  toggleModal: false,
  aciertos: 0,
  errores: 0,
  contenido: Ember.computed('questions', function () {
    let i = 0,
        content = [],
        contenido = [];
    for (i; i < this.get('questions.length'); i++) {
      content.push(this.get('questions.' + i + '.id_question_group.questions'));
    }

    contenido = [].concat.apply([], content);
    return contenido;
  }),
  count: 0,
  page: 1,
  perPage: 1,
  pagedContent: pagedArray('contenido', {
    pageBinding: "page",
    perPageBinding: "perPage"
  }),
  totalPagesBinding: "pagedContent.totalPages", 
  progressValue: 0,
  color: Ember.computed('count', function () {
    return new Ember.String.htmlSafe("width: " + this.get('progressValue') + "%;");
  }),
  actions: {
    ...(all my actions)
  }
});

在我看来，我有这个：

{{#if exam.show_progressbar}}
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow={{progressValue}} aria-valuemin="0" aria-valuemax="100" style={{color}}>
    <span>{{progressValue}}%</span>
</div>
{{/if}}
{{#if exam.show_time}}
  {{countdown-timer autoStart='false' startTime=exam.duration action='saveresponse'}}
{{/if}}
{{#each pagedContent as |result index|}}
<div class="text-center">
  <p>{{result.questionID.description}}</p>
  <br/><br/>
</div>
<form {{action 'saveresponse' on="submit"}}>
  {{radio-group group=result.questionID.temp elements=result.questionID.rows action="updateValues" nombre=result.questionID.description}}
  <br/>
  <div class="row">
    <div class="column text-left">
      <button type="button" {{action 'showAlert'}} class="btn btn-primary">
        Cancelar
      </button>
    </div>
  </div>
  {{#if last}}
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12 text-right">
      <div class="column text-right">
        <button type="submit" class="btn btn-primary">
          Guardar examen
        </button>
      </div>
    </div>
  </div>
  {{/if}}
</form>
{{/each}}
<div class="pager">
   {{page-numbers content=pagedContent currentPage=page action='checkLast'}}
</div>

以下组件中的错误：{{countdown-timer}} 和 {{radio-group}}

倒计时定时器是一个基于ember-cli-timer 的组件，它从设定的时间开始计数到0，而radio-group 组件只有一个radio-button helper。

任何关于为什么在生产中不工作而在本地工作的想法？

2017 年 3 月 23 日更新

使用 chrome 开发者工具我遇到了这个错误，也许这可以解释更多我的问题。

Property set failed: You passed an empty path

2017 年 4 月 24 日更新

我刚刚在组件中发现了确切的错误，这是下一个操作：

actions: {
    ...
    fillQuestions(){
        let questions = this.get('contenido'); //Filled with exam questions
        for(let i = 0; i < questions.length; i++){
            if(questions[i].questionID !== null && questions[i].questionID !== undefined){
                console.log(questions[i].questionID.description); //consoles the description of the question
                this.set(questions[i].questionID.description, ''); //here it's the problem.
            }
        }
     }
     ...
  }

this.set() 的行是问题所在，因为questions[i].questionID.description 是empty path，有没有办法通过相同的操作在组件中创建新属性？

Answer 1

我终于找到了错误，在组件尝试设置新属性时显示错误。

真正的问题是： 当我试图保存问题的属性时，一些问题得到了“。”似乎Ember.computed 不允许将它们用于属性，所以当我尝试this.set('some.question.with.dots', '') 时，错误被触发并显示Property set failed。

解决方法很简单，我只需要使用javascript的.replace()函数来替换字符串中的所有点。

最后的代码如下：

actions: {
    ...
    fillQuestions(){
        let questions = this.get('contenido'); //Filled with exam questions
        for(let i = 0; i < questions.length; i++){
            if(questions[i].questionID !== null && questions[i].questionID !== undefined){
                let desc = questions[i].questionID.description.replace(/\./g,'');
                this.set(desc, ''); //the problem has gone
            }
        }
    }
    ...
}

感谢所有以他们的观点支持我的人。