流星：表示アレイデータテーブルは、新しい列

Question

を追加することで、重複する値を与えるように私は、この配列データを表示しようとしている...私の流星アプリでテーブル内

var data = [ 
    [ 'field 1', 'field 2', 'field 3' ], 
    [ 'field 1', 'field 2', 'field 3' ], 
    [ 'field 1', 'field 2', 'field 3' ] 
]; 

：

<table> 
    <tbody> 
     {{#each data}} 
      <tr> 
       {{#each this}} 
        <td><input type="text" value="{{this}}"></td> 

       {{/each}} 
       <td><input type="text" value=""></td> 
      </tr> 
     {{/each}} 
    </tbody> 
</table> 

新しい列を追加するには、各行の末尾に常に空白のinputを置く必要があります。入力が変更されます場合は

は、データコレクションに保存されます。

'change input': function(event) { 
    var data = [], 
     tr = []; 

    $('tbody tr').each(function() { 
     $(this).find('input[type="text"]').each(function() { 
      tr.push($(this).val()); 
     }); 
     data.push(tr); 
    }); 

    Table.update(
     { _id: id }, 
     { $set: 
      { 
       data: data 
      } 
     } 
    ); 

}, 

しかし、私は最後の入力に入力を行う場合は、新しいフィールドが配列に追加されますが、値が取得します新しい最後の入力フィールドにも表示されるので、重複が表示されます。私はテンプレートのマークアップのように、最後のフィールドが常に空である理由を理解していません。なぜなら、値が得られず、each -loopの外です。

最後の入力配列は、ユーザーが入力した値と新しいデータ配列がテンプレートを作成するために使用されているようです。

Answer 1

重複のための理由は、流星のテンプレートを再レンダリングする方法にあると思われます。メテオおそらく更新 DOMを単に削除し、最初からそれを再生成するのではなく、必要に応じて。

データベースをチェックすると、重複したデータはブラウザ/フロントエンドにのみあり、バックエンドのMongoDBデータベースでは更新されません。

あなたがchangeイベントを処理してきたら、あなたは、単に入力要素を空にして、それを修正することができます。

'change input': function(event) { 
     var data = [], 
      tr = []; 

     $('tbody tr').each(function() { 
      $(this).find('input[type="text"]').each(function() { 

       tr.push($(this).val()); 

      }); 
      data.push(tr); 

      // Emptying the tr array after pushing into data array 
      tr = []; 
     }); 

     Table.update({ _id: id }, { 
      $set: { 
       data: data 
      } 
     }); 

     // Emptying the value of the input element which triggered the event 
     event.currentTarget.value = ""; 

    } 

Answer 2

テンプレートデータが変更された場合、Meteorは入力テンプレートを再レンダリングしません。テンプレートの更新だけで、データや残りのHTMLの変更によって直接影響を受ける要素は同じままです。したがって、あなたの場合、挿入が完了するたびに最後の入力フィールドをクリアする必要があります。正しい結果を表示するようにコードを更新しました。 -

<template name="testgrid"> 
    <table> 
     <tbody> 
     {{#each data}} 
      <tr> 
       {{#each this}} 
        <td><input type="text" value="{{this}}"></td> 
       {{/each}} 
       <td><input type="text" value="" class="newValue"></td> 
      </tr> 
     {{/each}} 
     </tbody> 
    </table> 
</template> 

var dataTable = [ 
    [ 'field 1', 'field 2', 'field 3' ], 
    [ 'field 1', 'field 2', 'field 3' ], 
    [ 'field 1', 'field 2', 'field 3' ] 
]; 

var Table = new Mongo.Collection(null); 
Table.insert({ 
    data: dataTable 
}); 

Template.testgrid.rendered = function() { 
} 

Template.testgrid.helpers({ 
    data : function() { 
     return Table.findOne({}).data; 
    } 
}); 

Template.testgrid.events({ 
    'change input': function(event) { 
     var tempData = [], 
      tr = []; 

     $('tbody tr').each(function() { 
      tr = []; 
      $(this).find('input[type="text"]').each(function() { 
       var tempValue = $(this).val(); 
       if(tempValue) 
        tr.push(tempValue); 
      }); 
      tempData.push(tr); 
     }); 

     $('.newValue').val(""); 
     var table = Table.findOne({}); 
     Table.update(table, {$set: {data: tempData}}); 
    } 
});