Как получить переведенные заголовки столбцов с помощью Meteor и aldeed:tabular?

Question

Я сталкиваюсь с той же проблемой, что и проблема № 53 aldeed:tabular, При определении таблицы, как предлагается в документации, слишком рано вызывать функцию перевода (TAPi18n.__ или другое), поскольку переменные I18N еще не установлены.

Какой хороший, реактивный способ подачи переведенных заголовков столбцов в DataTables либо непосредственно, как предложил сам Альдед, после закрытия вопроса, либо через aldeed:tabular?

Answer 1

Последние версии 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");

Слово предупреждения: в настоящее время это не работает, когда вы включаете невидимые столбцы в данные таблицы. Смещение неверно, и вы получаете неправильные заголовки столбцов.

Answer 2

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

С раздвоенной версией

Я создал запрос на ветку devel из 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});
}