# Rather odd binding behaviour in stache

**URL:** <https://forums.bitovi.com/t/rather-odd-binding-behaviour-in-stache/125>\
**Category:** CanJS\
**Created:** [January 16, 2016, 8:26am UTC](https://forums.bitovi.com/t/rather-odd-binding-behaviour-in-stache/125 "2016-01-16T08:26:46Z")\
**Posts on this page:** 5\
**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:** [January 16, 2016, 8:26am UTC](https://forums.bitovi.com/t/rather-odd-binding-behaviour-in-stache/125/1 "2016-01-16T08:26:46Z")

</div>

It seems as though binding to an attribute can be unpredictable.

In [example 1](http://jsbin.com/cijapu/edit?html,js,console,output) there is a binding directly in the template to `username` even though it is not defined in the associated `can.Map` and everything still seems to work Ok.

In [example 2](http://jsbin.com/tiqune/edit?html,js,console,output) there is _no_ direct binding but there is indirect binding through the components. This does not appear to work with the undefined `username` in the empty associated `can.Map`.

However, [example 3](http://jsbin.com/cotawo/edit?html,js,console,output) is identical to **example 2** except that the associated `can.Map({ username: '' })` now does _not_ have an empty `username`.

This behaviour is certainly not ideal. Am I perhaps missing something?

---

<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:** [January 16, 2016, 8:01pm UTC](https://forums.bitovi.com/t/rather-odd-binding-behaviour-in-stache/125/2 "2016-01-16T20:01:39Z")

</div>

The problem is that setting doesn’t exactly know where to set unless a value is established.

This is in many ways the equivalent of code like the following in JS:

```auto
var func1 = function(){
  var varA;
  return function func2(){
    var varB;
    varC = "SOMETHING";
  } 
}
func1()()

```

where does `varC` get set if a variable isn’t established? In JS it gets set as `window.varC`. In stache, it will set the most immediate scope.

Basically, stache is setting username on a local context. You can sorta see this here: [http://justinbmeyer.jsbin.com/mozoje/edit?html,js,output](http://justinbmeyer.jsbin.com/mozoje/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:** [January 17, 2016, 5:06am UTC](https://forums.bitovi.com/t/rather-odd-binding-behaviour-in-stache/125/3 "2016-01-17T05:06:13Z")

</div>

Ok. Makes sense.

This means that one needs to be rather careful when/how you create a `viewModel` using a function.

---

<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:** [January 18, 2016, 7:52pm UTC](https://forums.bitovi.com/t/rather-odd-binding-behaviour-in-stache/125/4 "2016-01-18T19:52:23Z")

</div>

@eben_roux I’m not sure exactly where you are in terms of understanding the available binding syntaxes, but your usage of `value="username"` on the component element and `{($value)}="{{value}}"` in the component’s template suggests to me that you are not aware that you can use direct bindings throughout the entire example, which would allow you to avoid this odd behavior.

I would do something like this:

```auto
<!-- 2-way bind component `value` to parent `username` -->
<core-textbox {(value)}="username"></core-textbox>

```

```auto
<!-- 2-way bind input's value to component's `value` -->
<input {($value)}="value">

```

http://jsbin.com/domixeqado/embed?html,js,output

This method still allows a lot of composability because you can specify to which parent property the input element will be bound in each instance of the component. The direct bindings also simplify debugging because you don’t have to wait for stache to update `{{value}}` which takes a turn.

---

<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:** [January 19, 2016, 4:05am UTC](https://forums.bitovi.com/t/rather-odd-binding-behaviour-in-stache/125/5 "2016-01-19T04:05:20Z")

</div>

Thanks Dylan,

That is quite interesting. In Ember one would have `value="username"` for passing a value and `valueBinding="username"` for two-way binding. So I need to get used to how this all works in canjs. Your solution is, quite obviously, the way to do it correctly 🙂

Regards,  
Eben