Ember 组件在生产中崩溃

Question

我的 ember 应用程序在生产环境中构建时遇到问题，使用 ember serve 所有组件都运行良好，但是当我使用 Ubuntu 16.04 应用程序因一个组件而崩溃。

这里有崩溃组件的代码：

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

countdown-timer是基于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
            }
        }
    }
    ...
}

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

Ember 组件在生产中崩溃

Ember components crashes on production

javascript

ember.js

digital-ocean