Model asinkron Ember.js

Saya memiliki file teks yang saya gunakan untuk membuat tabel menggunakan ember-models-table (https://github.com/onechiporenko/ember-models-table) komponen. Saya memiliki fungsi yang mengubah file menjadi objek json. Saya mengalami kesulitan dalam mendapatkan pemuatan asinkron. Saya ingin halaman dengan header tabel segera dimuat dan data ditampilkan setelah dimuat. Apa yang saya miliki saat ini tidak menampilkan apa pun sampai data dimuat. Apa yang saya lakukan salah? Terima kasih untuk bantuannya.

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

javascript asynchronous promise ember.js
person Alec Fenichel    schedule 15.10.2015    source sumber

Jawaban (1)


arrow_upward
1
arrow_downward

Dengan asumsi model tabel ember akan diperbarui dengan benar, triknya adalah dengan tidak mengembalikan janji, tetapi mengembalikan objek segera dan memperbarui objek secara asinkron setelah kejadian tersebut.

Isi Data

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

Rute

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

Sedikit pengerjaan ulang dengan penggantian array

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

Rute

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

Di dalam templat Anda, Anda kemudian akan mereferensikan {{model.dataObj.data}} alih-alih {{model.data}}

person Kingpin2k    schedule 15.10.2015
comment
Jadi sekarang halaman dan header segera dimuat tetapi kemudian hang dan data tidak pernah dimuat. Itu membuat browser saya (Chrome) hang dan saya harus menutupnya secara paksa. Tidak ada yang muncul di konsol. Ada ide? - person Alec Fenichel; 15.10.2015
comment
Wow, mengesankan sekali, jika Anda men-debugnya, mulai berputar di mana? - person Kingpin2k; 15.10.2015
comment
Jadi ini benar-benar berfungsi, tapi sangat lambat sehingga sepertinya crash. Jika file yang dibatasi pipa memiliki 500 baris, dibutuhkan waktu hampir 30 detik. Adakah yang tahu mengapa perubahan tersebut menurunkan kecepatan sebanyak itu? Dugaan saya, ini ada hubungannya dengan pushObject tapi saya tidak tahu apa. - person Alec Fenichel; 16.10.2015
comment
pushObject memberi tahu ember bahwa Anda telah menambahkan item ke koleksi. Jika Anda hanya menggunakan Push, ia tidak akan mengetahui bahwa koleksi telah berubah, dan tidak akan memperbarui item dependen apa pun. Dugaan saya adalah sesuatu dengan tabel model ember sangat lambat dalam menambahkan item setelah kejadiannya. ada kemungkinan bahwa alih-alih mengisi array setelah kejadian, mengganti array yang terisi penuh setelah kejadian mungkin lebih efisien. Saya akan memberikan sebuah contoh - person Kingpin2k; 16.10.2015
comment
Saya mendapatkan kesalahan berikut saat menavigasi ke rute: Kesalahan saat memproses rute: dashboard.logs.error Tidak dapat membaca properti 'lalu' yang tidak ditentukan TypeError: Tidak dapat membaca properti 'lalu' dari vendor.js yang tidak ditentukan:39394 Kesalahan: Lebih banyak objek konteks dilewati daripada ada segmen dinamis untuk rute: dashboard.logs.error vendor.js:39394 TypeError: Tidak dapat membaca properti 'lalu' yang tidak ditentukan - person Alec Fenichel; 19.10.2015
comment
Maukah Anda mempertanyakan penerapan Anda - person Kingpin2k; 20.10.2015
comment
Saya salah ketik di suatu tempat, saya coba lagi dan berfungsi dengan sempurna. Agak lambat dengan meja besar tapi cukup bagus! Saya akan membuat baris pertama bertuliskan memuat dan selesai. Terima kasih! - person Alec Fenichel; 20.10.2015