โมเดลอะซิงโครนัสของ Ember.js

ฉันมีไฟล์ข้อความที่ฉันใช้เพื่อสร้างตารางโดยใช้ 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};
    });
  }
});

person Alec Fenichel    schedule 15.10.2015    source แหล่งที่มา


คำตอบ (1)


สมมติว่าโมเดลตารางถ่านจะอัปเดตอย่างถูกต้อง เคล็ดลับคือการไม่ส่งคืนสัญญา แต่ให้ส่งคืนอ็อบเจ็กต์ทันทีและอัพเดตอ็อบเจ็กต์แบบอะซิงโครนัสหลังจากข้อเท็จจริง

เติมข้อมูล

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

person Kingpin2k    schedule 15.10.2015
comment
ตอนนี้โหลดหน้าและส่วนหัวทันที แต่จากนั้นก็ค้างและข้อมูลไม่เคยโหลด มันทำให้เบราว์เซอร์ของฉัน (Chrome) หยุดทำงาน และฉันต้องบังคับปิดมัน ไม่มีอะไรเกิดขึ้นบนคอนโซล มีความคิดอะไรบ้าง? - person Alec Fenichel; 15.10.2015
comment
ว้าว น่าประทับใจมาก ถ้าคุณดีบั๊กผ่านมันไป มันจะเริ่มหมุนตรงไหน? - person Kingpin2k; 15.10.2015
comment
มันใช้งานได้จริง แต่ช้ามากจนดูเหมือนว่าจะพัง หากไฟล์ที่ใช้ตัวคั่นไปป์มี 500 แถว จะใช้เวลาเกือบ 30 วินาที มีความคิดบ้างไหมว่าทำไมการเปลี่ยนแปลงจึงลดความเร็วลงมาก? ฉันเดาว่ามันเกี่ยวข้องกับ pushObject แต่ฉันไม่รู้ว่าอะไร - person Alec Fenichel; 16.10.2015
comment
pushObject แจ้ง ember ว่าคุณได้เพิ่มรายการลงในคอลเลกชันแล้ว หากคุณเพียงแค่ใช้การพุช มันจะไม่รู้ว่าคอลเลกชันมีการเปลี่ยนแปลง และจะไม่อัปเดตรายการที่ต้องพึ่งพาใดๆ ฉันเดาว่าเป็นสิ่งที่มีตารางโมเดลถ่านนั้นช้ามากในการเพิ่มรายการตามความเป็นจริง อาจเป็นไปได้ว่าแทนที่จะเติมอาร์เรย์ตามความเป็นจริง การแทนที่อาร์เรย์ที่มีข้อมูลเต็มตามความเป็นจริงอาจมีประสิทธิภาพมากกว่า ฉันจะยกตัวอย่าง - person Kingpin2k; 16.10.2015
comment
ฉันได้รับข้อผิดพลาดต่อไปนี้เมื่อนำทางไปยังเส้นทาง: ข้อผิดพลาดขณะประมวลผลเส้นทาง: Dashboard.logs.error ไม่สามารถอ่านคุณสมบัติ 'จากนั้น' ของ TypeError ที่ไม่ได้กำหนด: ไม่สามารถอ่านคุณสมบัติ 'จากนั้น' ของ vendor.js:39394 ที่ไม่ได้กำหนด ข้อผิดพลาด: วัตถุบริบทเพิ่มเติม ถูกส่งผ่านมากกว่าที่มีเซ็กเมนต์ไดนามิกสำหรับเส้นทาง: Dashboard.logs.error vendor.js:39394 TypeError: ไม่สามารถอ่านคุณสมบัติ 'จากนั้น' จากที่ไม่ได้กำหนด - person Alec Fenichel; 19.10.2015
comment
คุณจะใส่การดำเนินการของคุณในคำถามหรือไม่ - person Kingpin2k; 20.10.2015
comment
ฉันพิมพ์ผิดที่ไหนสักแห่ง ฉันเพิ่งลองอีกครั้งและมันก็ทำงานได้อย่างสมบูรณ์แบบ ช้านิดหน่อยกับโต๊ะใหญ่แต่ก็ดีพอ! ฉันจะให้แถวแรกบอกว่ากำลังโหลดและเสร็จสิ้น ขอบคุณ! - person Alec Fenichel; 20.10.2015