Ember组件在生产时崩溃

时间:2017-03-22 03:15:50

标签: javascript ember.js digital-ocean

我在使用ember serve生成时使用我的ember应用程序时出现问题所有组件都运行得很漂亮,但当我使用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,而无线电组组件只在一个单选按钮帮助器内。

为什么生产中的原因不起作用,而且在本地工作?

更新03-23-2017

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

Property set failed: You passed an empty path

更新04-24-2017

我刚刚在组件中找到了确切的错误,它是下一个操作:

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它有一种方法来创建新问题具有相同动作的组件中的属性?

1 个答案:

答案 0 :(得分:0)

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

真正的问题是: 当我试图保存问题的属性时,一些问题得到“。”似乎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
            }
        }
    }
    ...
}

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