javascript - Ember 组件在生产时崩溃

Question

当我在生产环境中构建 ember 应用程序时，我遇到了问题，使用 emberserve 所有组件都运行良好，但是当我使用 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，并且单选组组件仅包含一个单选按钮助手。

有什么想法可以解释为什么在生产中不起作用而在本地却起作用吗？

更新 2017 年 3 月 23 日

使用 chrome 开发者工具时出现此错误，也许这可以更多地解释我的问题。

属性设置失败:您传递了一个空路径

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 它是空路径 code> 有没有办法通过相同的操作在组件中创建新属性？

Answer 1

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

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

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

最终代码如下:

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
            }
        }
    }
    ...
}

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