Understanding stache bindings

CanJS
1

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

2

Anybody?

It has been a day and no response :frowning:

3

@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

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:

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

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!

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>
5

Curly braces { should go outside parentheses (

6

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?

7

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.

8

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.

9

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