Understanding stache bindings

I need to wrap my head around how the bindings work and I am somewhat lost at the moment:

<script id="app-template" type="text/stache">
  <span>email value:</span> {{email}}
  <span>literal value:</span> 
  <raw-input value='literal' />
  <span>one-way binding:</span> 
  <raw-input {value}='email' />
  <span>two-way binding:</span> 
  <raw-input {(value)}='email' />
  tag: "raw-input",
  template: can.stache('<input type="text" value="{{value}}" />')

  can.view("app-template", new can.Map({ 
    email: "test-email"

The code is in this jsbin and the bindings do not seem to work. What am I doing wrong?

I am going to eventually take this down to a composite component level so I need to get the basics down.


It has been a day and no response :frowning:

@eben_roux For the most part, I think the bindings are explained in the documentation. Feel free to ask about anything you don’t understand though.


I think your issue with the raw-input component is that the <input> only has a 1-way binding. Try changing the template like this:

  tag: "raw-input",
  template: can.stache('<input type="text" {($value)}="value" />')

For the most part, I agree about the documentation :slight_smile:
However, I have now tried every-which-way and I cannot get it working… I assume that you tried my jsbin.

I have now made it simpler: http://jsbin.com/tisili/edit?html,js,output

Yet the {{email}} on the page does not update? I even tried in IE. I tried adding another input and that too does not work.

This is the simplest thing and I cannot get it to work…

I must be missing something truly elementary but I cannot see it.

I usually try to create the simplest jsbin so that one can work from there.

Anyone, please help!


Just tried this:

<script id="app-template" type="text/stache">
  <input type="text" can-value="email" /> <!-- THIS WORKS -->
  <input type="text" ({$value})="email" /> <!-- THIS DOES NOT -->

Curly braces { should go outside parentheses (

mmm… pffft!

Thanks Justin.

However, my component still doesn’t work: http://jsbin.com/rejela/1/edit?html,js,console,output

Is there anywhere that I can find samples of components and composite components that, with some luck, will show how to incorporate validations?

It seems like the binding is working in the second jsbin.

The most recent one works also if I add back the new can.Map and change the binding back to <raw-input {(value)}='email' />.

One thing that may be confusing is that the values don’t change as you type, they only update on blur - when you tab or click out of the text box.

If you want the values to update as the user types, you’ll have to use ($input) to set the value and then {$value} to display the value. Here is a jsbin: http://jsbin.com/yuhudidifi/edit?html,js,output.

At long last!


Thanks a stack Kevin… quite easy to get wrong but some practice will sort that. I guess the Map makes sense since if there isn’t anything to bind to it makes it kind of difficult.

You’re welcome. Let us know if you have any ideas on how to document this better so it’s easier to pick up.