Meteor 1.8, Blaze & i18n Localization - meteor

So far it seems both Tap & Universe don't work for me with Meteor 1.8 and Blaze
Install for Universe:
meteor add universe:i18n universe:i18n-blaze
Install for Tap:
meteor add tap:i18n tap:i18n-db
I have the folllowing configuration files (both Tap and Universe):
/i18n/en.i18n.json
{
"hello": "hello world"
}
/i18n/fr.i18n.json
{
"hello": "bonjour"
}
The Blaze template file with Tap
/client/blaze-template-tap.html
<template name="BlazeTemplateTap">
{{_ "hello"}}
</template>
/client/blaze-template-universe.html
<template name="BlazeTemplateUniverse">
{{__ "hello"}}
</template>
Also, with Universe (only) I need to register namespace in template:
/client/blaze-template-universe.js
Template.BlazeTemplateUniverse.bindI18nNamespace('hello');
The result is alway just no matter if I change the localization between English and French via the
chrome://settings/languages
and/or the Quick Language Switcher Chrome extension.
// Chrome Result:
hello world
So connection (both in Tap and Universe) is made between the Blaze template {{__ "hello"}} and the en.i18n.json file { "hello" "hello world" } because it's displaying "hello world". But something is not clicking when I try to switch languages in Chrome.
I need help getting Tap or Universe (or even i18next, which I have not tried) to display different languages within Blaze.

Related

Twig function navigation in PhpStorm

I have been successfully using space + left click navigation from within my twig templates to open function, filter definitions.
E.g.
{{ somefunction() }}
-->
new \Twig_SimpleFunction('somefunction', ...
For some reason this has stopped working. Strangely autocomplete still works though.
Enable the Checkbox "Enable Plugin for this Project" in the PHPStorm Stettings -> Languages & Frameworks -> PHP -> Symfony
Make sure the Twig-Plugin ist installed.
Restart PHPStorm, Done.
Go to declaration and its type
JetBrains PhpStorm Documentation
TL;DR: Keep pressing Ctrl and hover over function/filter and left click.
This is not limited to twig templates and can be used throughout all PhpStorm.

Using package 255kb/meteor-status Nothing appears on my application when I call the template {{> meteorStatus}}

I created a simple Hello World Meteor example and was trying to use the meteor-status package. In GitHub the documentation says to use the template { {> meteorStatus} } but when running the application, the screen goes blank, if I remove {{> meteorStatus}} the application shown normally
Are those extra spaces in your { {> meteorStatus} } in your application? If so, that's probably your issue and you should use {{> meteorStatus}} without spaces.

Angular translate, Using staticFilesLoader not working

I'm trying to localize my app with angular translate.
here are my modules :
angular.module('myapp', [
'angular-meteor',
'ui.router',
'ngMaterial',
'ngMessages',
'ngAnimate',
'ngCookies',
'pascalprecht.translate'
]);
Then my config :
angular.module('myapp').config(['$translateProvider', function ($translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: 'client/lib/translation/',
suffix: '.json'
});
$translateProvider.preferredLanguage('en-US');
}]);
my en-US.json file content :
{
"TITLE" : "hello"
}
And I'm testing it with this html :
<h1> {{"TITLE" | translate}}</h1>
I tested it with a table in a variable and it works well, the issue seems to be that my .json is not found or ignore, because it display
TITLE
instead of
hello
I'm currently working on the same issue. What it seems to be is that the digest cycle is running too early due to the external file/s being loading asynchronously.
A workaround: In your HTML use the attribute directive instead.
Example:
<p data-translate="TITLE"></p>
Disclaimer: This may not be the best solution, I am still learning AngularJS myself!
Actually I found the issue, I had to put my locales files in the public folder. So this is fixed.
This is a fully working example:
http://plnkr.co/edit/Ibq4EaFcvyUPGpqb81Jo?p=preview
To use a translation one can also use something like
{{"TITLE" | translate}}
or:
<h2 translate="TITLE"></h2>
I also had issues with loading the files, I eventually found the starting path seems to be the www folder.
Then in the config start without a forward slash, so this is what works for me in my app config:
.config(function ($translateProvider) {
//$translateProvider.fallbackLanguage("en");
$translateProvider.determinePreferredLanguage();
$translateProvider.useStaticFilesLoader({
prefix: 'js/translations/locale-',
suffix: '.json'
});
$translateProvider.use('en_US');
$translateProvider.preferredLanguage('en_US');
})
I found it by using the chrome debugger (chrome://inspect), it shows errors in the console that are not showing up in the usual terminal when running ionic with -lc.
I hope that helps anyone :)!

Meteor app Development

When I use tag on my .html page to reduce my code visibility in Meteor app development. Instead of showing data of that correspondent template, it shows the name of the template..
For eg:
{{>season}}
<template name="season">
<ul><li>Summer</li></ul>
</template>
.. But unfortunately in output window it appears as {{> season}}
Maybe you did not startup your project.
You need to do this in console:
cd yourappname
meteor
I suggest you follow this tutorial to know how to startup your project:
https://www.meteor.com/try

right way to use subscriptions in meteor

In my meteor app I have all pages that needs to load one or more documents from elements collection and a couple of pages that loads documents from items collection;
I have the two publish functions for the two collections, but now I'm trying to understand the best way to subscribe them;
currently I'm subscribing elements in a file in the /client directory:
Meteor.subscribe("elements");
This will make the subscription on application start;
in the other case, since the items to be loaded are a little more, I've decided to use the subscription option in iron router:
subscriptions: function() {
return Meteor.subscribe("items");
}
The first difference I can see is that it seems that elements, once started the application, will not take time anymore to load (navigating through pages takes no time for loading);
on the other hand, every time I open the page that loads items, (event without a refresh) takes the loading time again;
Would be probably not the best solution to subscribe also items on application start, since they are only needed if you visit their specific route (elements otherwise are needed everywhere);
but there is a way to avoid reloading them from the server every time I ask the route again?
Also thinking about elements, they are not needed all in all pages: avery page need just one or two of them; so it would be probably more corret to load just the one or two that are really needed...
How subscriptions should be managed in your opinion?
I cover some of the trade-offs in my answer to this question. Here's how we use do this at Edthena using the subscriptions manager package:
// Allow the subman to cache a lot of subscriptions for a very long time
var subman = new SubsManager({cacheLimit: 100, expireIn: 864000});
// This is a global subscription that we may need to wait on later
subman.subscribe('sub1');
// This is a global subscription that we don't need to wait on
Meteor.subscribe('sub2');
Tracker.autorun(function() {
if (Meteor.userId()) {
// Add subscriptions which should be loaded globally but only
// after the user logs in.
Meteor.subscribe('sub3');
}
});
var PostController = RouteController.extend({
waitOn: function() {
// Use subman only if we want to cache the subscription between routes.
// Note that in the case of sub1, the previous handle will be reused
return [
subman.subscribe('sub1'),
subman.subscribe('sub4'),
Meteor.subscribe('sub5')
];
}
});
It's a matter of preference, but I think the simplest answer is that you can still use Iron Router's subscriptions option whilst centrally subscribing:
Subscription file:
Subscriptions = {
elements: Meteor.subscribe('elements'),
...
};
Router:
subscriptions: function() {
return Subscriptions.elements;
}
All the router needs is the handle which is returned by Meteor.subscribe, it doesn't actually have to do the subscribing. If you store these handles in a (sensibly named) global object, you can then pass them to the relevant router function when you need them.
First, install IronRouter enter; at the command prompt, enter "meteor add iron:router"; doing so will add that routing package.
So that your "raw" or base URL doesn't throw a routing exception, add this to the top of your .js file (above/outside the "isClient" and "isService" blocks):
Router.route('/');
Add a template or two (or more) to your project's .html file (you can use Notepad or Notepad++ for this, but I recommend the free (and "hackable") Atom editor, from Github, with the Meteor helper packages added. The project will be in a subfolder of whatever folder you were in when you entered the "meteor create" command. To download the Atom Editor, click this.
BTW, the video of the futuristic/pastistic coding family on the Atom Editor site is a gas, man!
Getting back to adding templates; as an example, here are a couple of templates I added:
<template name="garrapatabeach"><p>Here's a picture of Garrapata Beach; early morning;
long exposure.</p>
<p class="location">Garrapata Beach.Garrapata State Park.Big Sur.Monterey County.California</p>
<img height="600" src="/images/garrapataBeach.jpg" width="900" />
</template>
<template name="garrapataturnout"><p>Here's a picture from the first Garrapata turnout;
long exposure</p>
<p class="location">First Turnout.Garrapata State Park.Big Sur.Monterey County.California</p>
<img height="600" src="/images/GarrapataTurnout1.jpg" width="900" />
</template>
Now, add routes for those templates in the same part of the project's .js file where you added the "home" ("/") route in the .js file, so that it looks like this (the routes match the template names):
Router.route('/');
Router.route('/garrapatabeach');
Router.route('/garrapataturnout');
Note: This supposes you have added a "public" folder to your project, and an "images" folder beneath that, and that you have images with the names indicated in that images folder. If you want to "play along," you can download those images from dplatypus.meteor.com/garrapatabeach and dplatypus.meteor.com/garrapataturnout; otherwise, simply change the names of the jpgs and use your own images.
You will now be able to view your templates by navigating to the links given above (to run it, simply enter "meteor" at the command prompt while in the project's folder, and navigate to localhost:3000). However, to make it "more better" (so that the main page is not naked as a jaybird), we'll put some anchor tags/links in the main template, like so:
<body>
{{> main}}
</body>
<template name="main">
Garrapata Beach
Garrapata Turnout
</template>
Now the links will display when you navigate to localhost:3000, and clicking on them will route you to the appropriate page/template. To continue, just add another template, along with its corresponding routing entry and anchor tag/link.

Resources