Talesoft / tale-jade

A complete and fully-functional implementation of the Jade template language for PHP
http://jade.talesoft.codes
MIT License
88 stars 10 forks source link

Interpolation in elements attributes #74

Closed a-guerrero closed 8 years ago

a-guerrero commented 8 years ago

Hi, I'm trying to use interpolation in elements attributes like this (the code is just and example to demonstrate the error):

$dir= "http://my-site/content"
//- Works fine
p #{$dir}/assets
//- Don't work
img(src="#{$dir}/assets")

Output:

<p>http://my-site/content/assets</p>
<img src="<?=htmlentities(isset($dir) ? $dir : '', \ENT_QUOTES, 'UTF-8')?>/assets">

I had to play with the variable to make it work, but it would be nice to have interpolation in elements attributes just like the original implementation :-)

$dir= "http://my-site/content"
$dir= "{$dir}/assets"

//- Works fine
p #{$dir}
//- Works fine
img(src=$dir)
zorca commented 8 years ago

You may use Attribute Stacking:

$dir= "http://my-site/content"
img(src=$dir, src="/assets")

or simple PHP syntax:

$dir= "http://my-site/content"
img(src=$dir."/assets")

But original Jade Compiler works with vars without specific syntax: :-(

- var dir= "http://my-site/content"
img(src=dir + "/assets")

With this code I have error:

Uncaught exception 'Tale\Jade\Compiler\Exception' with message 'Failed to compile Jade: Failed to parse Jade: Attributes in elements and mixins need a name
(attribute at 8:20)
TorbenKoehn commented 8 years ago

$dir = "http://my-site/content"
img(src=$dir."/assets")

//or

$dir = "http://my-site/content"
img(src!="#{$dir}/assets")

http://sandbox.jade.talesoft.io/id-56fd4487857ff.html

Notice the != instead of = at the attribute to avoid value escaping (Tale Jade escapes everything by default for security reasons)

Always remember that this is Jade made for PHP, not just a simple fork and syntax change :)

Please tell me if this is resolved for you.

a-guerrero commented 8 years ago

Thanks!, both solutions work great for me! :grin:.