What I am looking to do is have a some way to have a placeholder in my translations file that on runtime when called I can pass in what i18next should replace that placeholder with and I am unable to find documentation on this.
// translations
{
“label”: “Message has {{count}} total messages”
“person”: “Welcome {{full_name}} to your new site”
}
In the component I am using it I have the following
<button aria-label={t(‘label’, { count: total_count})}>
<svg></svg>
</button>
But this is not working. Am I missing something? Thanks
What you are looking for is called interpolation.
Check out this: https://www.i18next.com/translation-function/interpolation
Related
When I have a textarea like
<textarea v-model="foo.abc.text"></textarea>
and either foo or foo.abc does not exist yet then
vue removes either parts of the DOM or is giving me a blank page.
It does never recover.
That alone is annoying, regardless of if I am using a debug version of vue or not.
If I try to use an approach that I have been advised to use earlier like
<textarea v-model="foo?.abc?.text"></textarea>
then I am still out of luck, I presume that I get a "rvalue" using those question marks and what I need rather is a variable location.
How do I, with as little trickery as possible, allow v-model to exist later on even if it doesnt exist now (late binding)?
Just shape your data accordingly and initialize it with empty values:
data(){
return {
foo: {
abc: {
text: ''
}
}
}
}
You can later populate it e.g. with the result of api call, but it's still better to initialize data properly
I would suggest going the :value + #input way. It allow more control over the input model, and does not require hiding it.
<textarea :value="!!foo && foo.abc.text" #input="(val) => !!foo && (foo.abc.text = val)" />
You can even hook in a validator:
<textarea
:value="!!foo && foo.abc.text"
#input="(val) => !!foo && (foo.abc.text = val)"
:rules="v => !v && 'The object has not been initialised'"
/>
I found a solution I can live with and then I got a comment in the same direction:
Conditionally showing the textarea.
v-if seems to do it but it falls under the "trickery" category, I think (angularjs would be more relaxed).
<textarea v-if="foo!=null" v-model="foo.abc"></textarea>
The symptom to hiding components if something is not all correct is not the best part of vue.js. Better show them and color them red.
https://qiita.com/munieru_jp/items/d7e9f98b5ab5960e7a93
If you do as above, you can get the contents of {{$ t ('HELLO_WORLD')}} in the <template> tag.
How can I get {{$ t ('HELLO_WORLD')}} in the <script> tag in the same file?
The reason is that I want to manage title descriptions and og related items with head.
We apologize for the inconvenience, but we would appreciate it if you could teach us.
Then thank you.
You have access to the nuxt-i18n translation helper in the script of your page with this.$t and the head method on the other hand has access to the this context.
So you could do something like this:
export default {
head () {
return {
title: this.$t('HELLO_WORLD')
}
}
}
Use the head method to set the HTML Head tags for the current page.
https://nuxtjs.org/api/pages-head/
I am working on project with JSViews, Observables and TypeScript.
I planned to handle several languages so I have an object that holds french and english version. A class with static methods that returns the collection of names and an array with all the static objects.
I wanted to display the objects in a dropdown with a converter to fetch the english name, I managed to fill the dropdown and react on change but I can't display the current item in the dropdown and I don't see what is missing.
Could you please help ? I made a javascript sample here :
https://jsfiddle.net/ClaudeVernier/v093uqg0/
var data = new dataModel();
for (var member in Harbors) {
if (typeof Harbors[member] == "object" && Harbors[member].name) {
data.harbors.push(Harbors[member]);
}
}
var myTmpl = $.templates("#harborTmpl");
myTmpl.link("#container", data);
$.observe(data, "*", myHandler);
Then, I'll need to figure how to change language on the click of a button, if you have idea on that... it would help :-)
Many thanks,
Claude
Take a look at Data-linked <select> elements - including the section <select> with converters.
Your code:
<select id="cboHarbor" data-link="{{getName:activeHarbor}}">
is incorrect. You need to data-link to activeHarbor. If activeHarbor was a string, you could data-link using:
<select id="cboHarbor" data-link="activeHarbor">
but since it is an object you need to have some kind of string-valued property for each harbor object, that you can then use for each option value. Then you will use converters to convert back and forth between the activeHarbor object and its string value property for the data-link binding behavior.
For example you can use the name in the current language as string value, but it is a bit strange to use a value that changes based on current language. But you need a getHarbor converter to convert back to get from the name to the harbor object. That would look like this:
<select id="cboHarbor" data-link="{getName:activeHarbor:getHarbor}">
{^{for harbors}}
<option data-link="{getName:}"></option>
{{/for}}
</select>
Alternatively you can use the index of the harbor in the array, like this:
<select id="cboHarbor" data-link="{getIndex:activeHarbor:getHarbor}">
{^{for harbors}}
<option value="{{:#index}}" data-link="{getName:}"></option>
{{/for}}
</select>
with converters as follows:
$.views.converters({
getIndex: function (harbor) {
return harbor.index;
},
getHarbor: function (index) {
return data.harbors[index];
},
getName: function (harbor) {
return harbor.name[data.languages[data.currentLanguage]];
}
});
If you want to be able to dynamically change language and have the harbors drop-down switch to the new language, then you must make your getName converter depend on the current language, like this:
$.views.converters.getName.depends = [data, "currentLanguage"];
Here is an updated version of your jsfiddle complete with a language drop-down to switch language.
UPDATE:
Concerning the depends for getName, a modified jsFiddle has this:
function getName(harbor) {
return harbor.name[data.languages[data.currentLanguage]];
}
$.views.converters({
getName: getName,
...
});
getName.depends = [data, "currentLanguage"];
So you can simply use a getName function as your converter function, and then in the context in which you have access to the data instance (in a done() if it needs to be async), you then assign the depends:
getName.depends = [data, "currentLanguage"];
No need to use $.views.converters.getName.depends
I'm trying to use Vuejs with some plugins.
There are two components
Vue.component('element-one', {
template: '<h1>Element ONE</h1>',
}
And the second one :
Vue.component('element-two', {
template: '<h1>Element TWO</h1>',
}
I want to be able to display the compiled version of element-one in element-two, I know there is something like:
var element = Vue.component('element-one');
new element().$mount().$appendTo('body');
But I'd love to have just the 'mounted' version, and not append it to any place.
Something I can play with in console.log ??
I received an answer from https://gitter.im/vuejs/vue. You can get the element by
new element().$mount().$el
I am trying to add a custom spinner logic to a spinner field I have. I have been able to customize the spinner in the "view" by using onSpinUp:.
I am looking to refer to the spin up step in the controller but I am not having success. I am unable to reach the debugger I have in the "spinner" function.
This is what I have so far, I am not sure what I am missing. Could someone shed light on this?
Thanks in advance.
`control:{
currentTime:{ //currenTime is the itemId
spinup: 'spinner' // spinner is the function name
},
}`
`
spinner: function (){
debugger;
}
`
I see that you have added single quotes, and I'm not sure if you code looks exactly like this, but your control object should look like:
//currenTime is the item id so it has to be wrapped
// with single quotes and it also needs a # prefix.
control:{
'container #currentTime': {
spinup: 'spinner' // spinner is the function name
}
Check fiddle: https://fiddle.sencha.com/#fiddle/uo1
Note: You need to add container #currentTime, just #currentTime won't work. It's a known issue with Sencha Touch.