Ember.js異步模型

Question

我有一個文本文件，正在使用ember-models-table（ https://github.com/onechiporenko/ember-models-table ）組件創建表。 我有一個將文件轉換成json對象的函數。 我在獲取異步加載時遇到了一些困難。 我希望帶有表頭的頁面立即加載，並且數據一旦加載就顯示。 在加載數據之前，我目前沒有顯示任何內容。 我究竟做錯了什么？ 謝謝您的幫助。

import Ember from 'ember';

function getData(columns, url, deliminator) {
  return Ember.$.get(url).then(function(file) {
    var data = [];
    var headers = [];
    var lines = file.split("\n");

    for(var i = 0; i < columns.length; i++){
      headers[i] = columns[i].propertyName;
    }

    for(var j = 0; j < lines.length; j++){
      var obj = {};
      var currentline = lines[j].split(deliminator);

      for(var k = 0; k < headers.length; k++){
        obj[headers[k]] = currentline[k];
      }

      data.push(obj);
    }

    return data;
  });
}

export default Ember.Route.extend({
  model() {
    var columns = [
      {
        "propertyName": "date",
        "title": "Date/Time"
      },
      {
        "propertyName": "application",
        "title": "Application"
      },
      {
        "propertyName": "priority",
        "title": "Priority"
      },
      {
        "propertyName": "message",
        "title": "Message"
      }
    ];

    var url = 'http://localhost:4200/Errors.log';
    var deliminator = '|';
    return getData(columns, url, deliminator).then(function(data) {
      return {columns, data};
    });
  }
});

Answer 1

假設ember表模型將正確更新，訣竅是不返回promise，而是立即返回對象並在事實發生后異步更新對象。

填充數據

function populateData(columns, url, deliminator, data) {
  Ember.$.get(url).then(function(file) {
    var headers = [];
    var lines = file.split("\n");

    for(var i = 0; i < columns.length; i++){
      headers[i] = columns[i].propertyName;
    }

    for(var j = 0; j < lines.length; j++){
      var obj = {};
      var currentline = lines[j].split(deliminator);

      for(var k = 0; k < headers.length; k++){
        obj[headers[k]] = currentline[k];
      }

      // this is important here, you want to use pushObject instead of push
      data.pushObject(obj);
    }
  });
}

路線

export default Ember.Route.extend({
  model() {
    var columns = [
      {
        "propertyName": "date",
        "title": "Date/Time"
      },
      {
        "propertyName": "application",
        "title": "Application"
      },
      {
        "propertyName": "priority",
        "title": "Priority"
      },
      {
        "propertyName": "message",
        "title": "Message"
      }
    ];

    var url = 'http://localhost:4200/Errors.log',
        deliminator = '|',
        data = [];
    populateData(columns, url, deliminator, data);

    // ES6 Enhanced Object Properties, Property Shorthand
    return {columns, data};
  }
});

稍作返工，更換陣列

function getData(columns, url, deliminator) {
  return Ember.$.get(url).then(function(file) {
    var headers = [];
    var data = [];

    var lines = file.split("\n");

    for(var i = 0; i < columns.length; i++){
      headers[i] = columns[i].propertyName;
    }

    for(var j = 0; j < lines.length; j++){
      var obj = {};
      var currentline = lines[j].split(deliminator);

      for(var k = 0; k < headers.length; k++){
        obj[headers[k]] = currentline[k];
      }

      // this is important here, you want to use pushObject instead of push
      data.push(obj);
    }
    return data;
  });
}

路線

export default Ember.Route.extend({
  model() {
    var columns = [
      {
        "propertyName": "date",
        "title": "Date/Time"
      },
      {
        "propertyName": "application",
        "title": "Application"
      },
      {
        "propertyName": "priority",
        "title": "Priority"
      },
      {
        "propertyName": "message",
        "title": "Message"
      }
    ];

    var url = 'http://localhost:4200/Errors.log',
        deliminator = '|',
        dataObj = { data: [] };

    getData(columns, url, deliminator).then(data => Ember.set(dataObj, 'data', data));

    // ES6 Enhanced Object Properties, Property Shorthand
    return {columns, dataObj};
  }
});

然后，您可以在模板內部引用{{model.dataObj.data}}而不是{{model.data}}