I am working on a template for a react component with plop.js and I am using conditional handlebars to render some content conditional upon an argument passed along with the command used to generate the content. Here is the conditional content of the template:
{{#ifCond "withStyles"}}import * as styles from "./{{pascalCase name}}.styles";{{/ifCond}}
When I use the line above, it returns "cannot read properties of undefined (reading "replace") which might be due to using {{pascalCase name}} inside the {{ifCond}} so how can we achieve the same thing in a correct way as it seems wrong.
Thanks in advance.
Related
I'm progressively migrating an existing Symfony application to VueJS.
The issue I recently discovered is the {{ stuff }} markup are always interpreted by VueJS, even if the content come from a rendered twig variable.
To avoid this, I would like to extends the html escaper to replace { and } by the respective { and } html codes.
How can I do that properly? The escaping is inside a twig_escape_filter without a service I can override.
I also tried to make a custom escape strategy guesser, returning my vue escaping, itself calling the twig_escape_filter with html escaping before replacing the needed characters. All my source code was escaped. :-D
Thanks for the help.
In fact you could solve this problem in your javascript as simple as that:
import Vue from 'vue';
Vue.options.delimiters = ['${', '}'];
Now you can use double brackets ({{ }}) for twig like you did before and ${ } for VueJs.
EDIT: What you want to do is impossible. You can indeed convert {{ }} to its corresponding html entities using a simple filter like this:
new \Twig_Filter('yourFilter', function ($string) {
return htmlentities($string, ENT_HTML5);
}, ['is_safe' => ['html']])
but since Vue runs on top of your rendered html, the conflict you present will still occur (because html will render these html entities as brackets).
Your only solution is to use a more specific delimeter for your Vue like this one, to avoid this conflict:
Vue.options.delimiters = ['$vue{', '}'];
Is there any way to detect when the {{>Template.dynamic template=content}} changes and then run some functions ?
You can wrap your functions in a template.autorun() block, in the dynamic template you are rendering (in his rendered function) .
If you need to follow it from outside, you can use the tracker Deps feature: you declare the change in the autorun block.
I am building a form using the awesome angular-schema-form. I am able to create my form schema object quite successfully. I am wanting (hoping) to be able to set all the form components in the schema using the x-schema-form property in the schema object.
I am able to specify the type and the titleMap's for selects all perfectly. However where I am having an issue is assigning a style to the element using the "x-schema-form" - it just seems to be being ignored.
So when I do the following (Note I have the Ionic Framework)
"x-schema-form": {
"type": "textarea",
"style": "item item-input"
}
The "style" is not getting passed to the form. If I pass the style in the $scope.form [] then I get the style. I am however trying to do this all in the schema as it would be much easier for me to do it in one place due to the nature in which I get the list of form elements.
Any advice on this would be greatly appreciated.
Thanks
BrentR
so asf doesn't actually support the style attribute at all, so what you're trying there is not possible at the moment. However you can use x-schema-form to apply a fieldHtmlClass and then via CSS apply styling.
You can read more on the standard options in the documentation. https://github.com/Textalk/angular-schema-form/blob/master/docs/index.md#standard-options
In Meteor, if the below is my HTML,
<template name="myTemplate">
The value is {{value}}
</template>
I can define the value in two ways
Template.myTemplate.helpers
value: ->
'insideHelper1'
Template.myTemplate.value =
'outsideHelper1'
The first way is using helpers as documented here (http://docs.meteor.com/#template_helpers) whereas the second way is using the Live Template examples as defined here (http://docs.meteor.com/#livehtmltemplates)
Just wondering, what is the difference between the two and when should I use one over the other?
They're exactly the same.
If you use .helpers, it actually just adds it to Template..
It depends on your coding style. You may prefer to use .helpers since it makes cleaner code if you have many helpers on the same template.
One small technically way they're different is Template.helpers adds the helpers to your Meteor app when your Meteor app starts up, whereas using the Template.helpername adds it before. So if you need to overwrite any helpers, you could use the .helpers method. The one that runs last will have the active helper.
Is there a way to include an existing dom-element through Handlebars, while being able to keep a reference to said dom-element?
to explain:
I have a jquery-element $el of which I want to include the dom-element ($el[0]) in a handlebars template.
I have some jquery code that uses $el.html("new stuff") after handlebars has included the template (again: this template contains $el[0]
The usual solution would be to rewrite the code by providing a selector so jquery can access the element. However, the code that needs to change $el doesn't know where in the template $el[0] will be used, since this is configurable. Having to specify the selector by config is possible obviously but this doesn't really feel dry to me.
So, any way to do this?
I implemented this with a handlebars helper that injects a unique id and post-render keeps a ref from uniqueid -> element to bind.
On postrender I simply find the elements with the unique-ids and update each element to it's mapped el to bind.