# Understanding stache bindings

**URL:** <https://forums.bitovi.com/t/understanding-stache-bindings/363>\
**Category:** CanJS\
**Created:** [July 18, 2016, 5:07am UTC](https://forums.bitovi.com/t/understanding-stache-bindings/363 "2016-07-18T05:07:03Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![eben\_roux](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/eben_roux/32/380_2.png) [@eben\_roux](https://forums.bitovi.com/u/eben_roux)\
**Post date:** [July 18, 2016, 5:07am UTC](https://forums.bitovi.com/t/understanding-stache-bindings/363/1 "2016-07-18T05:07:03Z")

</div>

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}}
  <br/>
  <br/>
  <span>literal value:</span> 
  <raw-input value='literal' />
  <br/>
  <br/>
  <span>one-way binding:</span> 
  <raw-input {value}='email' />
  <br/>
  <br/>
  <span>two-way binding:</span> 
  <raw-input {(value)}='email' />
</script>
  
can.Component.extend({
  tag: "raw-input",
  template: can.stache('<input type="text" value="{{value}}" />')
});

$("body").prepend(
  can.view("app-template", new can.Map({ 
    email: "test-email"
  })) 
);

```

The code is in [this jsbin](http://jsbin.com/xizuvif/1/edit?html,js,output) 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.

---

<div class="post-metadata">

**Author:** ![eben\_roux](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/eben_roux/32/380_2.png) [@eben\_roux](https://forums.bitovi.com/u/eben_roux)\
**Post date:** [July 19, 2016, 4:31am UTC](https://forums.bitovi.com/t/understanding-stache-bindings/363/2 "2016-07-19T04:31:03Z")

</div>

Anybody?

It has been a day and no response ☹

---

<div class="post-metadata">

**Author:** ![DylanRoss](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/dylanross/32/71_2.png) [@DylanRoss](https://forums.bitovi.com/u/DylanRoss)\
**Post date:** [July 19, 2016, 7:52am UTC](https://forums.bitovi.com/t/understanding-stache-bindings/363/3 "2016-07-19T07:52:12Z")

</div>

@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.

[https://canjs.com/docs/can.view.bindings.html](https://canjs.com/docs/can.view.bindings.html)

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:

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

```

---

<div class="post-metadata">

**Author:** ![eben\_roux](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/eben_roux/32/380_2.png) [@eben\_roux](https://forums.bitovi.com/u/eben_roux)\
**Post date:** [July 19, 2016, 10:09am UTC](https://forums.bitovi.com/t/understanding-stache-bindings/363/4 "2016-07-19T10:09:34Z")

</div>

For the most part, I agree about the documentation 🙂  
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](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!

**UPDATE**

Just tried this:

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

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [July 19, 2016, 11:59am UTC](https://forums.bitovi.com/t/understanding-stache-bindings/363/5 "2016-07-19T11:59:54Z")

</div>

Curly braces { should go outside parentheses (

---

<div class="post-metadata">

**Author:** ![eben\_roux](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/eben_roux/32/380_2.png) [@eben\_roux](https://forums.bitovi.com/u/eben_roux)\
**Post date:** [July 19, 2016, 12:40pm UTC](https://forums.bitovi.com/t/understanding-stache-bindings/363/6 "2016-07-19T12:40:24Z")

</div>

mmm… pffft!

Thanks Justin.

_However_, my component still doesn’t work: [http://jsbin.com/rejela/1/edit?html,js,console,output](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?

---

<div class="post-metadata">

**Author:** ![phillipskevin](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/phillipskevin/32/102_2.png) [@phillipskevin](https://forums.bitovi.com/u/phillipskevin)\
**Post date:** [July 19, 2016, 2:10pm UTC](https://forums.bitovi.com/t/understanding-stache-bindings/363/7 "2016-07-19T14:10:49Z")

</div>

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](http://jsbin.com/yuhudidifi/edit?html,js,output).

---

<div class="post-metadata">

**Author:** ![eben\_roux](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/eben_roux/32/380_2.png) [@eben\_roux](https://forums.bitovi.com/u/eben_roux)\
**Post date:** [July 19, 2016, 3:00pm UTC](https://forums.bitovi.com/t/understanding-stache-bindings/363/8 "2016-07-19T15:00:17Z")

</div>

At long last!

Pfew!

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.

---

<div class="post-metadata">

**Author:** ![phillipskevin](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/phillipskevin/32/102_2.png) [@phillipskevin](https://forums.bitovi.com/u/phillipskevin)\
**Post date:** [July 19, 2016, 9:39pm UTC](https://forums.bitovi.com/t/understanding-stache-bindings/363/9 "2016-07-19T21:39:49Z")

</div>

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