combining dust and angular: escaping curly brackets?

[ghost]

Hi,

I'm trying to combine Dust (server-side) with Angular (client-side). Now Dust uses curly brackets {..}, whereas Angular uses double curly brackets {{ .. }}

I was hoping Dust would leave the double curly brackets alone, but it doesn't. So {{title}} is rendered as {} when "title" is not defined on the server side.

Instead it seems like the only way to render {{title}} is to escape these brackets by using {lb} and {rb}. In case of Angular twice, so the above becomes {lb}{lb}title{rb}{rb} -- which is really awful (a showstopper)

To handle this situation I'd like to propose an option that would make Dust ignore double curly brackets, such that one can just write {{title}}. Optional as forcing this may break existing Dust code.

I strongly favor a solution which allows to write Angular code without altering it, since that would allow people to simply take Angular existing Angular-html-code and drop it into a Dust template unchanged. And technically it seems to be feasible.

Thoughts anyone? Or perhaps any alternatives to what I'm trying to achieve?

[rragan]

Maybe extend the compiler with a pragma to designate alternate open/close tokens.

[ghost]

Alternate open/close tokens sounds like that solves a different problem. Maybe my description was not very clear so let me rephrase:

I'd like to use Angular & Dust combined, which should in theory work fine since the open/close tokens for Angular are double curly brackets {{ }} and for Dust are single { }. However Dust takes the {{ }} and replaces the innermost { } whereas it should not touch those.

[rragan]

True. If we are adding a compiler pragma, it could just as well say "ignore nested braces" which would make the world safe for Angular as you suggest. This seems a very clean minimal solution.

[jimmyhchan]

What about folks who may be using this "feature"? We currently do not have a definition for double curly but it seems imo we should treat anything within curls as a Dust syntax.

I believe the only safe way to use double curly in Dust is to use {~lb}{~lb}. Also, we added a raw syntax using curly backtick to help write literal curly and newlines.

Adding a compiler option or pragma makes sense but it should be opt in.

[ghost]

IMHO it would be strange if people write {{ .. }} and expect the innermost (single curly) part to be treated as Dust syntax. Cannot think of a practical use case. But since I'm new to Dust I would not dare to place bets on that.. Surely to be on the safe side it should be opt-in.

Didn't know about the curly backtick syntax, I'll check it out, thanks. Already sounds better than {~lb}{~lb}, but the compiler option/pragma would be superior by far.

[shchekoldin]

Hi!

If I understand your problem correctly you could try to change Angular's interpolate symbols: http://docs.angularjs.org/api/ng.$interpolateProvider

For example:

$interpolateProvider
    .startSymbol("[[")
    .endSymbol("]]");

[smfoote]

@shchekoldin This looks like a good solution, at least in the short term.

[mani95lisa]

@shchekoldin Hi, I got this work, but bind can't. bind is like this : <li ng-class="{ active: isActive('/')}"><a href="/">Home</a></li> Do you have any solution? thanks!

[shchekoldin]

Hi!

As a quick workaround you can just surround your object's content with spaces: { active: isActive('/') } instead of {active: isActive('/')} Dust won't recognize it, but Angular will.

Or you can modify Dust's parser a little bit to change interpolate symbols=) Pls, see an example: http://jsfiddle.net/vrungel/Bg534/

You can find my changes by finding all occurrences of START_SYMBOL and END_SYMBOL words.

I've put modified version of parser.js in separate file: http://yadi.sk/d/WIulg8coLE7LM

Hope this help!

[mani95lisa]

@shchekoldin Thanks!

[shchekoldin]

P.S.: The better (the right=)) way to edit parser is to rebuild it with symbols you need: https://github.com/linkedin/dustjs/blob/master/src/dust.pegjs

[rlaferla]

{~lb} and {~rb} is a really bad way to escape braces. For example, I have some HTML with embedded Javascript that has uses curly braces in multiple places. If I use an editor to replace { with {~lb}, I can't then use it to replace } with {~rb} because it turns the {~lb} into {~lb{~rb}

Better approach:

1. Make the escape sequence the same for both { and }. ie. you could use "" as the escape character so that "{" is an escaped { and "}" is an escaped } . In both cases, the character to be escaped is preceded by the escape sequence/string.
2. Make the escape sequence/string customizable per render. When you render a template, you pass in an optional parameter for the escape delimiter string (1 or more characters.)