Best place to define placeholder text

#1

In a simple app I’m building I wanted to define a placeholder text for an input field. The text should contain the value of the name property of the model that is behind the template:

{{input type="text" class="new-artist" placeholder=placeholderText value=newTitle }}

I then went ahead and defined placeholderText on the controller:

placeholderText: function() {
  return "New " + this.get('name') + " song";
}.property('name')

That works fine but I was wondering about whether it’s considered good practice to define presentation data on the controller. An alternative solution would be to do this on the view. The two snippets would only have to change very slightly. The view:

placeholderText: function() {
  return "New " + this.get('context.name') + " song";
}.property('name')

The template:

{{input type="text" class="new-artist" placeholder=view.placeholderText value=newTitle }}

Is one of the presented solutions better than the other? Or should I use a helper to render the input field? Do I suffer from the “backend-MVC syndrome” to think that presentation concerns so close to “template functionality” have no place on the controller? (If this was not a placeholder property but just the content of an html element I would write the whole thing in the template and be done with it)

Thank you in advance.

#2

Have you considered making the placeholder text a computed property in your model?

#3

For a long time now, regardless of framework, I’ve been leaving these kinds of strings in the template most of the time. This is purely pragmatic – I’m rarely heavily involved in the html integration side of things, and the people who are are almost always more comfortable working with html than ruby/javascript/whatever.

A possible exception is localisation, but even with localisation my experience over the years has been that a template-driven approach ends up working best in practice. Well over half of the localized apps I’ve built have ended up needing language specific templating, starting out with a non-template based localisation strategy is wishing future pain on yourself.

Also, putting these kinds of strings in the controller does often hamper re-use. What happens if a widget gets added at some point that lets the user “quick-edit” some field. But it resides in a smaller piece of screen, and so it needs an abbreviated placeholder. Are you going to give its own version of the controller? Or add an attribute for switching the placeholder – which you then have to bind in the template anyway?

#4

@atsjj I did but I think that displaying a placeholder text is a presentation concern and thus does not belong to the model.

@lastobelus I agree that it belongs on the template (see the last paragraph of the original question). However, given Handlebar’s logic-less nature (a good thing) it can’t be put there. Or do you know of a way?

Otherwise, your points are valid and so I tend towards defining the placeholderText property on the view which is the closest thing to the ideal place, the template.

#5

you are right – can’t leave it in the template in handlebars.