如何使用流星和aldeed获得翻译的列标题:表格?

问题描述:

我遇到了与issue #53 of aldeed:tabular相同的问题。按照documentation中的建议定义表格时,由于尚未设置I18N变量,因此调用翻译函数(TAPi18n.__或其他)太早。如何使用流星和aldeed获得翻译的列标题:表格?

将翻译的栏目标题翻译为DataTables的好的反应式方式,在结束问题时直接作为suggested by aldeed himself或通过aldeed:tabular

随着.tabular.options

没有与模板的.tabular.options反应 变量的一种方式,但它是古怪的。下面是一个使用 tap-i18n到 列标题翻译library example的变化:

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

最近aldeed的版本:表格允许指定函数设置列标题。

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

字的警告: 目前这当您在您的表中的数据无形列不起作用。偏移量是错误的,你会得到错误的列标题。