How set short month names using ember-moment

2019-07-25 07:06发布

问题:

I need to change short month in moment. But I can't do it. I have try to set

localeOutputPath: 'assets/moment-locales'

And call

Ember.$.getScript('/assets/moment-locales/ru.js');

In this case i have ember-mirage error

 Your Ember app tried to GET '/assets/moment-locales/ru.js?_=1490191145335',
 but there was no route defined to handle this request. Define a route that
 matches this path in your mirage/config.js file

Is it simple way to set short months name for moment?

回答1:

I assume you are using ember-moment addon; and already have configured config/environment.js with

moment: {
  // This will output _all_ locale scripts to assets/moment-locales
  localeOutputPath: 'assets/moment-locales'
},

as you have mentioned.

Ember.$.getScript('/assets/moment-locales/ru.js');

provides a way to dynamically load moment ru locale on the fly when needed. This means instead of including the related locale to your application's javascript file you prefer to load relevant locale upon some user request in your application. Generally it is best to perform such loading operation within a router's hook methods such as beforeModel or model.

In order to get short month names from moment; you need to first import ES6 moment module via

import moment from 'moment';

and access the short month names with

moment.monthsShort()

As far as I can see; there is a problem with the way you are requesting the locale so you are getting the error you have mentioned. I believe a working code is a better explanation from pure text; hence I have created the following git repository to illustrate how you can change the locale dynamically in a route and how you can display short names retrieved from moment. Please take a look at it by cloning and running in your localhost.

In the application at this repository, application.hbs contains links to 5 sub-routes; each displaying short names of months in different languages. The code that does the trick of dynamically loading the relevant locale is in routes/locale-route.js file's model hook method. If locale is already loaded (note that English is included by default with moment) it simply returns the short names of the months via switching to target locale (moment.locale(localeToLoad);). Otherwise, it performs a remote call to the server and waits for the response (by using a promise) to return the name of months. All routes for 5 different languages extend from this base route. Once, a locale is loaded from the server; you no longer need to load it again once more and the locale-route already handles it as I explained. I hope that helps.

After reading your comment; I updated the source code to include ember-cli-mirage. Mirage is a client-side mock server to develop, test and prototype your application. Once you include it as a dependency it starts intercepting your remote call requests. Hence, in your case mirage intercepts requests for demanding related locale. What you need to do is passing through mirage for locales. In order to do that, you need to add following

this.passthrough('/assets/moment-locales/**');

to mirage/config.js so that mirage will not interfere with demanding moment-locales at the runtime. Please see related file under the git repository I have provided. This will solve your problem for sure.