I'm trying to get to grips with Handlebars / Mustache in order to build an atomic design (à la PatternLab).
I'm doing ok but I've stumbled trying to define a partial.
Here's my example:
{{#partial 'selectOption' }}
<option value="{{value}}" label="{{label}}" {{#disabled}}disabled{{/disabled}} {{#selected}}selected{{/selected}}>{{text}}</option>
{{/partial}}
{{#.}}
<select name="{{name}}" id="{{ID}}" class="selectField selectList {{cssString}}" {{{htmlAttributes}}}>
{{#optGroups}}
<optGroup {{#disabled}}disabled{{/disabled}} label="{{label}}">
{{#options}}
{{> selectOption}}
{{/options}}
</optGroup>
{{/optGroups}}
{{#options}}
{{> selectOption}}
{{/options}}
</select>
{{/.}}
What I'm trying to achieve is creating a partial for the 'option' tag. I've been crawling all over Google and SO all afternoon trying to get my head 'round this one and this is the closest I've got.
However, when I try to run this I get: Uncaught Error: Missing helper: 'partial'
I thought that partials were built-in to handlebars but if not I guess I have to install it as a helper? I've tried to work that out too but to no avail.
The examples on the handlebars site don't seem to work (or I'm copying them into the wrong places).
Any help?
OK, so fresh eyes and a good nights sleep solves the problem again.
I was somehow using v2.0.0 of handlebars instead of the latest (v4.0.0).
After updating I can now create an inline partial using the following syntax:
{{#*inline "selectOption"}}
<option value="{{value}}" label="{{label}}" {{#disabled}}disabled{{/disabled}} {{#selected}}selected{{/selected}}>{{text}}</option>
{{/inline}}
Hope this is of use to someone else.
Related
I know there is a way in plain html to require the field have some kind of value. I believe it's 'input required'.
However, I'm not sure how to accomplish this in ember using handlebars. I've tried this but it was unsuccessful:
{{input required value=tax class="form-control" placeholder="State Tax"}}
Thanks in advance.
In ember input helpers you always have to give values to attributes. The shourtcuts like <input disabled required value="..."/> in html without value are not allowed in handlebars. Instead you have to write {{input disabled=true required=true value="..."/>
See ember twiddle with your example: https://ember-twiddle.com/b073b4551065e8884056de55fe0c9800?openFiles=templates.application.hbs%2C
I've been playing around with golang for a couple of weeks now, and recently started to look into the revel framework.
In other languages/frameworks that I've used, it's always been possible to check what the current route is from within the template. Something that made it easier for me to keep things like navigation in a separate template file, and just do this:
<!-- in header template -->
<ul class="nav">
{{ if eq .req.action "App.Index" }}
<li class="active"><a href="#">
{{ else }}
<li><a href="{{url "App.Index" }}">
{{end}}
Home</a></li>
<!-- other links here -->
</ul>
This isn't the actual code I'm writing, but I hope this makes it clear what the idea is: Have a template for the navigation handy, and set classes/links according to which action is the current one.
After some time going through the source code, and a number of golang template examples, I couldn't quite see any way in which the current action or anything else is exposed to the template.
To get around this, I'm currently using a func interceptor which automatically sets a render argument for me:
func prependRoute(c *revel.Controller) revel.Result {
c.RenderArgs["_current_route"] = c.Action
return nil
}
This is working fine, but it feels a bit hacky. I think I'm probably missing something really obvious that would allow me to reserve func interceptors for when I really need them.
The question, then, is simple: What is the correct, and most reliable way to find out what the current action is in a revel template?
I am creating an Ember.Component which displays a CRUD table. As the component shall be reusable it needs a lot configuration, such as columns to display, pagination options, etc. ...
At the moment I am inserting the component using handlebars:
<div class="some-div">
{{power-table items=this.model columns='...'}}
</div>
I wouldn't want to use this nice way of inserting a component. However, it is pot really possible to extensively configure a component here, is it? I found out it's not even possible to pass an object as parameter, e.g. the following it not possible:
<div class="some-div">
{{power-table items=this.model columns=[id, name, foo, bar] }}
</div>
How and where should I configure the component?
What you can do is that instead of setting columns=[id,name,foo,bar] in the handlebar like this:
<div class="some-div">
{{power-table items=this.model columns=[id, name, foo, bar] }}
</div>
You can set the columns property in the controller for the handlebar template and use the name of the property in the handlebar file. So all the logic would come from the controller and the handlebar would just tell which property is accessible in the component and by what name. So the controller for the enclosing template would be the best place to heavily configure the component. Have a look at the following page for more info:
http://emberjs.com/guides/components/passing-properties-to-a-component/
I am not sure if I understood your problem correctly.
I have a list.gsp which loads a template .
Actually the template contains which loads the data from the domain class.
Every 10 seconds I want to refresh the template only, so that it gets latest data from the db. How can i do this?
There are several ways to solve this but all of them require Ajax. I'll give one example:
Suppose the following HTML:
<div class="content">
... other content here
<div id="template">
<g:render template="someTemplate" ... />
</div>
... other content here
</div>
Then this javascript:
setInterval(refreshTemplateEveryTenSeconds, 10000);
function refreshTemplateEveryTenSeconds() {
$('#template').load("/some/server/resource");
}
See the jquery load docs for more info on this.
Obviously, if you're not using jQuery then modify to do the ajax call as your technology would suggest. But this gives you a general idea of how you might approach the problem.
Using meteor.js and i am kind of stuck with the structure of template or how to do this trick as clear as possible.
Example of my chating app problem:
chatingWith = DB query for selecting each user i am chating with like on FB // REACTIVE
{{#each chatingWith}}
{{#each this.messages}}
Message1...
Message2...
{{/each}}
<form>
<input class="sendMessage" type="text" />
</form>
{{/each}}
This works exactly as i need but with one big problem... when new message arrive... the content is re-rendered ofc and when i am in this time writing a message the value of will dissapear.
How would you solve this?
Sorry for english and thx for tips!
There is a section in the documents about preserving inputs. http://docs.meteor.com/#template_preserve
From my understanding, as long as you have the package preserve-inputs installed, it should keep the reactive nature of meteor from erasing the input. I would check to see if the preserve-inputs package is installed.