My toolchain: Node.js / Express3 / Jade.
I have tried to get Jade template interpolation to work with form input attributes, specially 'readonly' attribution. Trying it many ways, but not got any glue for this. Interpolation is working well with other attributes, f.ex 'value', but just this 'readonly' is quite odd.
This is working:
input#f5lng(
type='text',
style='width: 70px;',
name='f5lng',
value='#{data.lng}',
readonly)
but how to interpolate with variables with rendering module?
Trying to render:
res.render('modMrkForm', { layout:false, tid:req.params.id, data:d, ro:'readonly' } );
and intepolating in Jade with :
input#f5lng(
type='text',
style='width: 70px;',
name='f5lng',
value='#{data.lng}',
= #{ro})
doesn't work. Neither just = ro.
Is there some trick to get it working.
Btw, rendering module knows whether this 'readonly' is required or not, so in other case rendering should be something:
res.render('modMrkForm', { layout:false, tid:req.params.id, data:d, ro:'' } );
Any idea what's wrong here.
it works this way:
input#f5lng( type='text', style='width: 70px;', name='f5lng', value='#{data.lng}', readonly=ro)
and
res.render('modMrkForm', { layout:false, tid:req.params.id, data:d, ro:true } );
just use an boolean instead of a string. i found it on the jade documentation, it's pretty good:
https://github.com/visionmedia/jade#a7
Related
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
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.
I want to make a relatively simple formatter in VS Code. Essentially, I have a bunch of *.md.j2 files (Jinja2 templates that ultimately become Markdown). I have the Better Jinja extension to render these, with the language jinja-md in VS Code.
I started off just wanting to use prettier's Markdown formatting and call it a day. I tried adding this to settings.json:
"[jinja-md]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
},
This does not work because esbenp.prettier-vscode does not register itself for the jinja-md type; it seems to have no "break glass" option to configure that.
This got me to thinking that it would be nice to make a formatter that ignored Jinja tag lines (e.g. {% if foo == 'bar' %}\n and then passed on the fragments to whatever the underlying file type formatter was. So basically I want to do something like:
vscode.languages.registerDocumentFormattingEditProvider('jinja-md', {
provideDocumentFormattingEdits(document: vscode.TextDocument): vscode.TextEdit[] {
// THIS IS THE QUESTION:
// vscode.languages.getFormatter is not a real method. I want to know
// how to pull off this concept.
mdFormatter = vscode.languages.getFormatter('md');
// Get segments between %}\n and \n{% and route them to the
// `mdFormatter` -- I think I know how to do this and am not bothering
// to write the code here.
}
});
Is this a thing I can do -- can I programmatically get from VSCode "the formatter user-configured for language X"?
I'm trying to use Font-awesome in the same way I do with Bootstrap, in accordance with the semantic principles of web design (not putting billions of non-semantic classes in my HTML tags), using LESS.
It seems that it is impossible : the icon definitions are like that :
.#{fa-css-prefix}-home:before { content: #fa-var-home; }
This isn't a mixin definition but a classical CSS rule build with LESS variables.
So, i'm unable to do this kind of declaration :
.meaning-class-name {
.fa-home;
}
Lessc complain that .fa-home is undefined.
Is it a way to avoid to rot my HTML code ? Is there a way to attribute a class to an other class with less ?
Thanks !
I found that the better solution were to modify font-awesome/less/icons.less and rewrite the declarations according this pattern :
.#{fa-css-prefix}-home { &:before { content: #fa-var-home; } }
It is similar to the glyphicons.less used by Bootstrap.
PS : In Eclipse, this can be done quickly with the find/replace tool :
Find :
\.#\{fa-css-prefix\}-([-0-9a-zA-Z]+):before \{ content: #([-0-9a-zA-Z]+); \}
Replace :
.#{fa-css-prefix}-$1 { &:before { content: #$2; } }
and
Find :
\.#\{fa-css-prefix\}-([-0-9a-zA-Z]+):before,
Replace :
.#{fa-css-prefix}-$1,
Unfortunately, I need to use a specific browser hack on a page:
.selector { (; propery: value ;); }
However, I keep getting compilation errors when I try to compile my SCSS. I imagine there is a certain way I need to write this so it's compiled properly?
What you need is interpolation.
.selector {
#{"(; "}propery: value#{" ;)" };
}
Demo: http://sassmeister.com/gist/0a190be584097a723d5e