のデータのロードと

Question

を切り開く私は、プラグインのawspを通じて流星1.4.1にhandsontable使用しています：handsontable@0.16.1

は、私が持っている問題は、毎回行列が再レンダリングされることをです私は2つの問題を生み出す価値を変えます。 1つは、編集されたセルのフォーカスが失われ、スクロールが先頭に戻ることです。もう1つは、行列のデータが変更ごとにリロードされるため、値が保存されないことがあることです。

次のように私はデータに加入し、テーブルをレンダリングしています方法は次のとおりです。

Template.connectivityMatrix.onCreated(function() { 
    this.activeScenario =() => Session.get('active_scenario'); 

    this.autorun(() => { 
    this.subscribe('connectivityMatrixUser', this.activeScenario()); 
    }); 
}); 

Template.connectivityMatrix.onRendered(function() { 
    this.autorun(() => { 
    if (this.subscriptionsReady()) { 
     const activeScenario = Session.get('active_scenario'); 
     const currentScenario = Scenarios.findOne({_id: activeScenario}); 
     const currentTurn = currentScenario.turn; 
     const numObj = ConnectivityMatrix.find({scenario_id: activeScenario, user_id: Meteor.userId(), turn: currentTurn}).count(); 

     var myData = []; // Need this to create instance 
     var container = document.getElementById('connectivity-matrix'); 

     var hot = new Handsontable(container, { // Create Handsontable instance 
     data: myData, 
     startRows: numObj, 
     startCols: numObj, 
     afterChange: function (change, source) { // 'change' is an array of arrays. 
      if (source !== 'loadData') { // Don't need to run this when data is loaded 
      for (i = 0; i < change.length; i++) { // For each change, get the change info and update the record 
       var rowNum = change[i][0]; // Which row it appears on Handsontable 
       var row = myData[rowNum]; // Now we have the whole row of data, including _id 
       var key = change[i][1]; // Handsontable docs calls this 'prop' 
       var oldVal = change[i][2]; 
       var newVal = change[i][3]; 
       var setModifier = {$set: {}}; // Need to build $set object 
       setModifier.$set[key] = newVal; // So that we can assign 'key' dynamically using bracket notation of JavaScript object 
       ConnectivityMatrix.update(row._id, setModifier); 
      } 
      } 
     } 
     }); 

     myData = ConnectivityMatrix.find({scenario_id: activeScenario, turn: currentTurn, user_id: Meteor.userId()}, {sort: {created_at: 1}}).fetch(); // Tie in our data 
     hot.loadData(myData); 
    } 
    }); 
}); 

私が達成したいどのようなことは一度だけ行列を作成代わりのように、各データ変更でそれを再作成することですフォーカスは保持され、データは常に保存されます。 私はこのquestion

Template.connectivityMatrix.onRendered(function() { 
    const activeScenario = Session.get('active_scenario'); 
    const currentScenario = Scenarios.findOne({_id: activeScenario}); 
    const currentTurn = currentScenario.turn; 
    const numObj = ConnectivityMatrix.find({scenario_id: activeScenario, user_id: Meteor.userId(), turn: currentTurn}).count(); 

    var hot = new Handsontable(container, { // Create Handsontable instance 
    ... 
    }); 

    this.autorun(() => { 
    if (this.subscriptionsReady()) { 
     myData = ConnectivityMatrix.find({scenario_id: activeScenario, turn: currentTurn, user_id: Meteor.userId()}, {sort: {created_at: 1}}).fetch(); // Tie in our data 
     hot.loadData(myData); 
    } 
    }); 
}); 

で提案されているように、私は）（this.autorunのブロック内でのみ最後の2行を残してみましたが、その後、私はページをロードする最初の時間は、データが利用できませんエラー

はそのため

未定義のプロパティ「ターン」を読み込めません、どのように私は適切時にセルの値を変更して再レンダリングせずにテーブルを作成するために必要なすべてのデータを取得することができます取得しますか？

ご協力いただきありがとうございます。

Answer 1

私は私が必要なものを行うために管理方法は、行列がレンダリングされる後に計算を停止することです。次のようにコードは次のとおりです。

Template.connectivityMatrix.onRendered(function() {  
    this.autorun((computation) => { 
    if (this.subscriptionsReady()) {  
     const currentScenario = Scenarios.findOne({_id: activeScenario}); 
     const currentTurn = currentScenario.turn; 
     const numObj = ConnectivityMatrix.find({scenario_id: activeScenario, user_id: Meteor.userId(), turn: currentTurn}).count(); 

     var myData = []; // Need this to create instance 
     var container = document.getElementById('connectivity-matrix'); 

     var hot = new Handsontable(container, { // Create Handsontable instance 
     data: myData, 
     colHeaders: arrayRowsCols, 
     rowHeaders: arrayRowsCols, 
     height: '450', 
     maxRows: numObj, 
     maxCols: numObj, 
     columns: columns, 
     afterChange: function (change, source) { // 'change' is an array of arrays. 
      if (source !== 'loadData') { // Don't need to run this when data is loaded 
      for (i = 0; i < change.length; i++) { // For each change, get the change info and update the record 
       var rowNum = change[i][0]; // Which row it appears on Handsontable 
       var row = myData[rowNum]; // Now we have the whole row of data, including _id 
       var key = change[i][1]; // Handsontable docs calls this 'prop' 
       var oldVal = change[i][2]; 
       var newVal = change[i][3]; 
       var setModifier = {$set: {}}; // Need to build $set object 
       setModifier.$set[key] = newVal; // So that we can assign 'key' dynamically using bracket notation of JavaScript object 
       ConnectivityMatrix.update(row._id, setModifier); 
      } 
      } 
     } 
     }); 

     myData = ConnectivityMatrix.find({scenario_id: activeScenario, turn: currentTurn, user_id: Meteor.userId()}, {sort: {created_at: 1}}).fetch(); // Tie in our data 
     hot.loadData(myData); 
     computation.stop(); 
    } 
    }); 
}); 

Answer 2

あなたは、彼らは準備ができている前に、シナリオとConnectivityMatrixコレクションを照会しようとしています。あなたのthis.subscriptionsReady()条件ブロック内のすべてのmongoクエリを移動します。