如何使用Meteor和aldeed获取翻译的列标题:表格?

时间:2016-02-26 09:14:28

标签: meteor datatables aldeed-tabular

我遇到了与issue #53 of aldeed:tabular相同的问题。根据{{​​3}}中的建议定义表时,现在调用转换函数(documentation或其他)还为时过早,因为I18N变量尚未设置。

将翻译后的列标题提供到TAPi18n.__中的好方法是什么,在问题结束时直接作为DataTables,或通过aldeed:tabular

2 个答案:

答案 0 :(得分:0)

使用.tabular.options

模板的.tabular.options有一种反应方式 变量,但它很古怪。以下是library example使用的变体 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));
    });
  });
}

使用分叉版

我针对pull request创建了branch devel of meteor-tabular,以启用基于响应的简单方法,如下所示:

<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});
}

答案 1 :(得分:0)

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");

警告语: 当您在表数据中包含不可见列时,这当前不起作用。偏移是错误的,你得到错误的列标题。