如何使用 Meteor 和 aldeed:tabular 获得翻译的列标题

Question

我遇到了与aldeed:tabular的问题#53相同的问题。当按照文档中的建议定义表时，调用转换函数（TAPi18n.__或其他）还为时过早，因为 I18N 变量尚未设置。

将

翻译的专栏标题输入DataTables的好方法是什么，无论是直接按照 aldeed 本人在关闭问题时的建议，还是通过aldeed:tabular？

Answer 1

with .tabular.options

有一种方法可以让模板的.tabular.options反应式可变的，但它很古怪。这是库的变体示例使用tap-i18n 翻译列标题：

function __(key) {
  if (Meteor.isServer) {
    return key;
  } else {
    return TAPi18n.__(key);
  }
}
Books = new Meteor.Collection("Books");
TabularTables = {};
TabularTables.Books = new Tabular.Table({
  name: "Books",
  collection: Books,
  columns: []      // Initially empty, reactively updated below
});
var getTranslatedColumns = function() {
  return [
    {data: "title", title: __("Title")},
    {data: "author", title: __("Author")},
    {data: "copies", title: __("Copies Available")},
    {
      data: "lastCheckedOut",
      title: __("Last Checkout"),
      render: function (val, type, doc) {
        if (val instanceof Date) {
          return moment(val).calendar();
        } else {
          return "Never";
        }
      }
    },
    {data: "summary", title: __("Summary")},
    {
      tmpl: Meteor.isClient && Template.bookCheckOutCell
    }
  ];
}
if (Meteor.isClient) {
  Template.tabular.onRendered(function() {
    var self = this;
    self.autorun(function() {
      var options = _.clone(self.tabular.options.get());
      options.columns = getTranslatedColumns();
      self.tabular.options.set(_.clone(options));
    });
  });
}

使用分叉版本

我针对meteor-tabular的分支devel创建了一个拉取请求，以实现基于响应式的简单方法，如下所示：

<template name="MyTemplateWithATable">
{{> tabular table=makeTable class="table table-editable table-striped table-bordered table-condensed"}}
</template>

var MyColumns = ["title", "author"];
// Assume translations are set up for "MyTable.column.title", "MyTable.column.author"
// in other source files; see TAPi18n documentation for how to do that
function makeTable() {
  return new Tabular.Table({
    name: "MyTable",
    collection: MyCollection,
    columns: _.map(MyColumns,
                   function(colSymbol) {
                     return {
                       data: colSymbol,
                       title: TAPi18n.__("MyTable.column." + colSymbol)
                     };
                   })
  });
}
if (Meteor.isServer) {
  // Called only once
  makeTable();
} else if (Meteor.isClient) {
  // Reactively called multiple times e.g. when switching languages
  Template.MyTemplateWithATable.helpers({makeTable: makeTable});
}

Answer 2

最新版本的

aldeed：tabular允许指定用于设置列标题的功能。

import {TAPi18n} from 'meteor/tap:i18n';
TabularTables = {};
TabularTables.Departments= new Tabular.Table({
  name: 'Departments',
  collection: Departments,
 responsive: true,
 autoWidth: true,
 stateSave: false,
 columns: [
    {data: "name", titleFn: function() {
      return TAPi18n.__("name");
    }},
    {data: "description", titleFn: function() {
      return TAPi18n.__("description");
    }}
  ]
});

语言更改是被动的。如果您有翻译，您可以切换，列将被翻译。

TAPi18n.setLanguage("en");
TAPi18n.setLanguage("de");

警告词：当您在表数据中包含不可见列时，这目前不起作用。偏移量错误，并且您得到错误的列标题。