如何在客户端获取数据以获得流星的动手?

时间:2016-07-10 10:27:53

标签: javascript meteor web handsontable

我的代码运行不正常,我不知道如何在我的.js文件中提供动手。我上次用html编写代码,我知道它在流星中是错的,但现在我改变了所有的代码。

我看到Meteor Handsontable example这是我需要的,但我使用https://github.com/awsp/handsontable-meteor而不是使用handontable的源代码,因为最后一个版本不起作用。我没有错误,但我没有看到任何桌子,我不知道为什么。

body.js

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

import { Cells } from './cells.js';
import './main.html';

if (Meteor.isClient) {
    Template.handsontable.rendered = function () {
       var myData = [];  // Need this to create instance
       var container = document.getElementById("hot");
       var hot = new Handsontable(container, {  // Create Handsontable instance
           data: myData,
           startRows: 5,
           startCols: 5,
           colHeaders: true,
           minSpareRows: 1,
           contextMenu: true,
           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
                         Cells.update(row._id,setModifier);
                      }
                  }
              }
          });
          console.log(hot);
          Tracker.autorun( function () {  // Tracker function for reactivity
              myData = Cells.find().fetch();  // Tie in our data
              hot.loadData(myData);
          });
      };
 }

 FlowRouter.route('/data-view/', {
     name: 'data-view',
     action() {
         BlazeLayout.render('handsontable');
     }
 });

main.html中

<template name="handsontable">
    <div class="handsontable" id="hot"></div>
</template>

cells.js

import { Mongo } from 'meteor/mongo';
import { Template } from 'meteor/templating';
import { ReactiveDict } from 'meteor/reactive-dict';

class CellsCollection extends Mongo.Collection {

}

export const Cells = new CellsCollection('Cells');

Cells.schema = new SimpleSchema({
    x: {
        type: Number
    },
    y: {
        type: Number
    },
    data: {
        type: String
    }
});

Cells.attachSchema(Cells.schema);

Meteor.methods({
    'updateCell': function(y, x, data){
        cell = Cells.findOne({x: x, y: y});
        if (cell != undefined){
            if (data != null){
                Cells.update({_id: cell._id}, {$set: {x: x, y: y, data: data}});
            }else{
                Cells.remove({_id: cell._id});
            }
        }
    },
    'createCell': function(y, x, data){
        if (Cells.findOne({x: x, y: y}) == undefined) {
            if (data != null) {
                Cells.insert({x: x, y: y, data: data});
            }
        } else{
            Meteor.call("updateCell", y, x, data);
        }
    }
});

如何解决?感谢。

0 个答案:

没有答案