How can I use vue.js with the dust template engine? Both are using {{}} as placeholders, are there any options to say dust: Hey, this part is especially for vue?
I got no idea since I haven't had found anything in the documentations.
https://vuejs.org/api/#delimiters
Vue.config.delimiters = ['!v', 'v!']
You can set the delimiters for Vue to whatever you'd like to avoid conflict. Also see Vue.config.unsafeDelimiters - https://vuejs.org/api/#unsafeDelimiters
The converse answer for Dust is that you can wrap a block in {` tags to tell Dust not to parse that block.
context = { "dust": "DUST!", "vue": "error" }
{dust} says {` hello {vue}! `}
will render to
DUST! says hello {vue}!
Related
I didn't find any documentation on $createElement in nuxt.
I tried using the following code to create an HTML Element:
const elem = this.$createElement('h' + this.hlevel)
elem.text = this.myTitle
console.log('My Element:', elem)
Result is an object but I do not know how to render it.
Is it really to create an HTML Element or should this be used for a different use case?
createElement is basically an alias to h, you can read more about it here: https://vuejs.org/guide/extras/render-function.html#render-functions-jsx.
Those are aimed towards highly customizable dynamic markup generation. If you don't need that (or you issue could be solved with a dynamic component for example), it may probably be overkill.
Simply use
render() {
return this.$createElement('h' + this.hlevel, this.myTitle)
},
Also make sure you don't have
<template></template>
as this will overwrite render().
Note: as kissu commented, the use of h() or $createElement() is probably overkill :)
I have a pug view
section#about.about
.container
.about__inner
.about__content
h3.about__title About me
h2.about__bigtitle Who am I
.about__text !{about}
a.btn(href="#" data-modal="#modal_hire_me") Hire me
button.btn(type="button" data-modal="#modal_resume") My resume
In express server I render it with "about", "works" and "reviewsAmount" variables.
The "about" variable value is
const about = `
<p>
I have #{works.length} works and #{reviewsAmount} reviews.
</p>
`;
But in page it renders like "I have #{works.length} works and #{reviewsAmount} reviews.". Variable values do not interpolate in paragraph tag. So, how to do that?
You are mixing up pug interpolation and JavaScript template strings. When the code is in your node/express route (and not in the template) you need to use JavaScript template strings.
If you use the ${} syntax this will fix it.
const about = `
<p>
I have ${works.length} works and ${reviewsAmount} reviews.
</p>
`;
With that said, I'd recommend against doing this and leaving all of your HTML in pug and not moving it into the node/express code. This will make your web pages more difficult to debug when something goes wrong, and also require more effort to maintain longer term.
Just pass those variables on to Pug and do the interpolation there:
section#about.about
.container
.about__inner
.about__content
h3.about__title About me
h2.about__bigtitle Who am I
.about__text
p I have #{works.length} works and #{reviewsAmount} reviews.
a.btn(href="#" data-modal="#modal_hire_me") Hire me
button.btn(type="button" data-modal="#modal_resume") My resume
I am using react-select to make a select box that geocodes an address and then provides a drop down list of the corresponding local government areas of that search returns.
I am just trying to format each option so it shows the State eg. Queensland after the local government area eg. Brisbane.
So I'm trying to get it to return something like:
Brisbane <small>Queensland</small>
But in the HTML it escapes and renders the tags.
It looks like optionRenderer would work, but it seems to be only available with the Select component of react-select and I am currently using Async because I want to wait for the geocoded latitude and longitude from Mapbox.
Anyone know a way to format options while using the <Async /> component?
OK so I worked out what I was doing wrong. The optionRenderer={this.renderOption} prop was working after all but I was returning a string instead of a JSX component.
So here's my method anyway for anyone who has this issue in the future:
renderOption(option) {
return <div> {option.label} <small>small</small></div>;
}
So I'll just need to split the option.label up and put the State in between the tags.
I want to update from dojo 1.7 to 1.8.3 so I have to replace the dojo.connect command.
switch:
< div id="universalPushSwitch" data-dojo-type="dojox.mobile.Switch" style="float:right" class="mblSwRoundShape1"></div>
Now I have:
dojo.require("dijit/registry");
dojo.require("dojo/ready");
dojo.require("dojox/mobile/ListItem");
dojo.require("dojo/aspect");
dojo.ready(function(){
dojo.aspect.after(dijit.registry.byId("universalPushSwitch"), "onStateChanged",
function(newState){
alert(newState);
}
)});
Firebug says: "aspect is not defined"
PS: I know I don't use the new AMD loader. This is an old project and I am also new to all the dojo stuff. A simple translate from dojo.require("x");dojo.require("y"); to require(["x","y"], function (x,y){...} doesn't work for me so there is still the old style require.
Try using:
dojo.aspect.after(...);
instead of
aspect.after(...);
And do not stop at the next function ! :-)
If that doesn't work at once, try loading aspect the global way (with a dot, not a slash):
dojo.require("dojo.aspect");
It also could be possible, that the old dojo is not compatible with "/" and that it only works with dots !
Source:
http://livedocs.dojotoolkit.org/dojo/require
Edit
Here is a working fiddle based on your fiddle:
http://jsfiddle.net/9Xdv2/
The main problem with your code was that you did not parse the html. dojo parser converts some specific html to "dojo javascript objects" ! You use that kind of html a lot ! You should have done a:
dojox.mobile.parser.parse();
Everything is in the jsfiddle !
Since you are using dojo 1.8.3 and have been using dojo 1.7, why don't you use the AMD syntax instead of the pre-1.7 ?
You would do something like :
<div id="universalPushSwitch" data-dojo-type="dojox/mobile/Switch" style="float:right" class="mblSwRoundShape1"></div>
And in your js :
require(["dijit/registry",
"dojox/mobile/ListItem",
"dojo/aspect",
"dojo/parser",
"dojo/domReady!"
], function(registry, ListItem, aspect, parser){
parser.parse().then(function(instances){
aspect.after(registry.byId("universalPushSwitch"), "onStateChanged",
function(newState){
alert(newState);
});
});
});
I am trying to use the Icomoon icon font with Haml and can't seem to find a way to escape the & so that it stays just an & instead of &.
The Icomoon font allows you to use HTML entities with a data-icon="" attribute. Works smooth as butter in HTML and even in a Haml file if I just do a straight HTML link.
However, since I'm learning Haml I thought I'd see if anyone on here would like to recommend the best way to approach this.
Here's a sample of what happens.
This is the original Haml:
%a(href='/posts' data-icon="&" aria-hidden='true')
This is how it compiles:
<a aria-hidden='true' data-icon='&' href='/posts'>
This is how it needs to compile for the icon font to work:
<a aria-hidden='true' data-icon='&' href='/posts'>
and here is a codepen where you can see how the icon renders due to the amp; addition: http://codepen.io/dandenney/pen/3/6
I didn't like the top poster's way of completing this question. So far the best way I've found is to do:
- foo = "&".html_safe
%a(href='/posts' data-icon=foo aria-hidden='true')
I'm not fully happy with this, but think it's better for rails apps rather than turning off HTML escaping everywhere.
You can use the :escape_attrs option to control whether HTML sensitive characters in attributes are escaped:
require 'haml'
haml = "%a(href='/posts' data-icon=\"&\" aria-hidden='true')"
puts Haml::Engine.new(haml, :escape_attrs => false).to_html
Output:
<a aria-hidden='true' data-icon='&' href='/posts'></a>
Note that this will apply to all attributes in your Haml template.
In my opinion, I don't like the idea to disable the feature to escape the characters generally. Maybe you use relay at some point in your application on it.
For me the best way to do it is:
%a{ href: '/', 'data-icon' => "✐".html_safe }