Question

我计划使用Meteor-Excel在Meteor v1.3应用中加载Excel工作表，并将工作表转换为JSON。我想要做的是将单元格值绑定到复选框网格。这样做的最佳方式是什么，以便它是被动的？ UI结果应该是一个复选框的html表。

以下是使用Meteor-Excel转换为JSON的示例Excel文件：

var myExcel = {
  "Sheet1": [
    {
      "Rows": "Row1",
      "C1": "TRUE",
      "C2": "FALSE",
      "C3": "TRUE",
      "C4": "TRUE"
    },
    {
      "Rows": "Row2",
      "C1": "TRUE",
      "C2": "FALSE",
      "C3": "FALSE",
      "C4": "FALSE"
    },
    {
      "Rows": "Row3",
      "C1": "TRUE",
      "C2": "TRUE",
      "C3": "TRUE",
      "C4": "TRUE"
    },
    {
      "Rows": "Row4",
      "C1": "TRUE",
      "C2": "FALSE",
      "C3": "TRUE",
      "C4": "TRUE"
    },
    {
      "Rows": "Row5",
      "C1": "TRUE",
      "C2": "TRUE",
      "C3": "TRUE",
      "C4": "TRUE"
    },
    {
      "Rows": "Row6",
      "C1": "FALSE",
      "C2": "TRUE",
      "C3": "FALSE",
      "C4": "TRUE"
    },
    {
      "Rows": "Row7",
      "C1": "FALSE",
      "C2": "TRUE",
      "C3": "TRUE",
      "C4": "TRUE"
    },
    {
      "Rows": "Row8",
      "C1": "FALSE",
      "C2": "FALSE",
      "C3": "TRUE",
      "C4": "TRUE"
    },
    {
      "Rows": "Row9",
      "C1": "TRUE",
      "C2": "TRUE",
      "C3": "TRUE",
      "C4": "TRUE"
    },
    {
      "Rows": "Row10",
      "C1": "TRUE",
      "C2": "TRUE",
      "C3": "TRUE",
      "C4": "TRUE"
    },
    {
      "Rows": "Row11",
      "C1": "TRUE",
      "C2": "TRUE",
      "C3": "FALSE",
      "C4": "FALSE"
    }
  ]
}

模板可能是这样的：

<template name="excel">
    <table>
        <thead>
            <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
                <th>Col 4</th>
            </tr>
        </thead>
        <tbody>
            {{#each rows}}
                {{> row}}
            {{/each}}
        </tbody>
    </table>
</template>

<template name="row">
  <tr>
    <td><input type="checkbox" checked={{C1}}></td>
    <td><input type="checkbox" checked={{C2}}></td>
    <td><input type="checkbox" checked={{C3}}></td>
    <td><input type="checkbox" checked={{C4}}></td>
  </tr>
</template>

使用返回行的帮助程序：

Template.excel.helpers({
    'rows': function(){
        return myExcel.Sheet1;
    }
});

但是，我不确定checked应该是什么，以及每个复选框应如何绑定到JSON以便被激活。

更新

为了让我的复选框正确呈现，以下是我在下面使用的内容。

模板：

<template name="excel">
    <table>
        <thead>
            <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
                <th>Col 4</th>
            </tr>
        </thead>
        <tbody>
            {{#each rowData in rows}}
                {{> row data=rowData idx=@index}}
            {{/each}}
        </tbody>
    </table>
</template>

<template name="row">
  <tr>
    <td><input type="checkbox" checked={{checked "C1"}} data-rowIndex="{{idx}}" data-column="C1"></td>
    <td><input type="checkbox" checked={{checked "C2"}} data-rowIndex="{{idx}}" data-column="C2"></td>
    <td><input type="checkbox" checked={{checked "C3"}} data-rowIndex="{{idx}}" data-column="C3"></td>
    <td><input type="checkbox" checked={{checked "C4"}} data-rowIndex="{{idx}}" data-column="C4"></td>
  </tr>
</template>

代码：

var myExcelDep = new Tracker.Dependency;

Template.excel.helpers({
    'rows': function() {
        myExcelDep.depend();
        return myExcel.Sheet1;
    }
});

Template.row.helpers({
    'checked': function(column) {
        return this.data[column] && this.data[column].toLowerCase() == "true" ? "checked" : false;
    }
});

Template.excel.events({
'change input[type="checkbox"]': function(event) {
  var x = event.target.checked;
  var col = $(event.target).attr("data-column");
  this.data[col] = x.toString();
  myExcelDep.changed();
 }
});

Answer 1

您可以使用tracker dependency。

执行此操作

在模板代码中声明依赖项：

var myExcelDep = new Tracker.dependency;

Template.excel.helpers({
    'rows': function(){
        myExcelDep.depend(); // this registers the dependency
        return myExcel.Sheet1;
    }
});

然后在创建/修改JSON的代码中，更新依赖项：

 ...
 myExcel.push(sheet2); // or any change operation
 myExcelDep.changed(); // this triggers invalidated functions to update
 ...

使用Meteor，使JSON数组反应的正确方法是什么？

1 个答案: