I need to use some handlebars block helpers inside of an element's attribute. How can I get
.some.class{:class => "{{if property}} otherClass {{/if}}"}
to parse properly? Here is the compiled output as is:
<div class='class otherClass property}} some {{/if}} {{if'></div>
I've tried escaping every non-word character, trying single quotes, and adjusting the spacing, but nothing seems to fix it. I'm hoping to find a more elegant solution than just using the :plain keyword.
I've found that you need to add some character before the {{}} for Haml to accept it. For example:
%div.some.class{:class => "a{{foo}}"}
Not idea, but suites my purposes.
Actually, the trick doesn't work for anything handlebars expression that is moderately complex.
In the end I resolved this by using string literals in haml. So in the example case shown in the question. The below haml is needed, remember to close your tag, which is the last line.
\ <div class='class {{if property}} otherClass {{/if}} some '>
-# Normal haml goes here and must not start at the same indent as the above literal
\ </div>
Move all the classes in to the class attribute instead of using both the class shorthand dot notation and a class attribute.
.col-md-12.card{ class: "{{toLowerCase level_name}}-master-card" }
becomes
%div{ class: "col-md-12 card {{toLowerCase level_name}}-master-card" }
HAML 4.0.7
Related
I have an input field with the value field being passed a string stored in Vuex.
The input fields changes are debounced and the new string synced to Vuex.
When bound like this :value="vuexState.myString, when typing, the cursor jumps to the end of the line.
When bound like this value={{vuexState.myString}}, the cursor stays where it is.
According to the guide: http://vuejs.org/guide/syntax.html#Arguments
These two should be the same, with the {{ }} style being internally converted to :bind. Could this be a bug?
My theory is that the cursor jumping occurs because the vuex state change re-renders the input and that the {{ }} style is interpolated only once while the binding syntax re-renders the input every change.
I am currently using value={{vuexState.myString}} but I'd like to know what is happening or if there is a better way to do this.
It's in the documentation about Interpolation and has been deprecated (see. Migration guit from 1.x)
Deprecated
This is the old way
<div class="btn btn-primary hint--top {{class}}"></div>
Solution
Use Javascript expression instead:
<div v-bind:class="'btn btn-success hint--top '+ class "></div>
Take a look at the console, it seems like it has been deprecated in favour of the colon syntax or v-bind:
vue.js:2237 [Vue warn]: foo="{{foo}}": Interpolation inside attributes has been deprecated. Use v-bind or the colon shorthand instead.
v-text:'something' === {{something}}
Is there a way I can invoke a helper inside a helper in handlebars? I would like to do something like this:
{{#each myCustomHelper}}
<li>{{this}}</li>
{{/each}}
Where the invocation of myCustomHelper returns an array of strings.
I'm trying to do this from node using express-handlebars and I do not want to pass that array of strings on each res.render.
I would like to avoid also outputting html from myCustomHelper.
Is the above possible?
Thanks!
And found the answer. At least in my case the syntax will be:
{{#each (myCustomHelper)}}
<li>{{this}}</li>
{{/each}}
Had to dig into this issue to find the correct syntax
HAML and ractive.js seem to play well together (if you don't mind not indenting the contents of a mustache section), though I have found one problem I can't solve.
When I do this:
.like{ class: "{{#if like}}active{{/if}}" }
...
I get this:
<div class='like like}}active{{/if}} {{#if'>...</div>
It appears that the HAML parser is assuming that word order doesn't matter inside of a class declaration, and is messing with my string (though I can't imagine why), but in this case I need that string to be preserved!
I know I could use plain html, but it gets quite messy when there are many nested tags.
Any ideas?
I figured it out...
If I change it from this:
.like{ class: "{{#if like}}active{{/if}}" }
to this:
%div{ class: "like{{#if like}} active{{/if}}" }
It works fine.
My narration has code snippets, e.g., ::SomePlatformAPI() that are not part of my code base and Doxygen warns that
warning: explicit link request to 'SomePlatformAPI()' could not be resolved
I tried to add \code and \endcode around it but then the code block starts a new paragraph and breaks the current narration.
Is there a way to add inline code blocks?
UPDATE:
This turns out to be only a problem of Doxygen 1.8 and above.
With 1.6, you don't have this issue.
Doxygen markdown support allows you to insert inline code blocks using the ` backtick character.
http://www.doxygen.nl/manual/markdown.html#md_codespan
When you do this the code will be injected inline, but it will be monospaced, and doxygen processing will be disabled between the two ` marks. So you will not have to escape tokens.
A a matter of fact, to make it stand out even more I included an extra style sheet with the following in it:
code
{
background-color:#EFD25E;
}
That will hylight the inline code. Doxygen's code spans use a custom tag
<code></code>
Found the solution myself:
All I need to do is to escape the :: token and other similar tokens ->.
For example
\:\:
\-\>
Dojo's dijit html5 tags use an attribte name data-dojo-props. The value is basically a JSON string without quotes around the property names and without the outermost braces.
It looks something like this.
data-dojo-props="prop1:'xyz', prop2:true, prop3: { subprop1: 1, subprop2: 'abc'}"
I'm using C# to write this out from a C# object using JSON.NET and passing in the object pointer. I found settings to leave out the property name quotes, but I can't figure out a graceful way to remove the outside braces.
For now, I'll run the string through a regex to remove them, but was wondering if someone new a better way.
I serialize each top level property separately and make it a global javascript variable. I then reference that variable in data-dojo-props. I admit it's not that elegant.
My concern with your approach above, is if the value of subprop2 contains a quote, you will get a parser error.
<script type="text/javascript">
menuData = {THE SERIALIZED JSON GOES HERE};
</script>
<div data-dojo-type="SomeWidget" data-dojo-props="menuData: menuData"></div>