These are chat archives for canjs/canjs

18th
Aug 2017
Justin Meyer
@justinbmeyer
Aug 18 2017 03:37
created this stream example for the upcoming CanJS 3.10: https://github.com/canjs/canjs/blob/can-kefir/demos/can-kefir/credit-card.html#L7

Highlights:

New binding syntaxes: <input on:input:value:to="userCardNumber.value"/>

basically sends the value of the input to a stream's value when the input event fires
  1. It uses streams directly via can-kefir
AntonProkofyev
@AntonProkofyev
Aug 18 2017 09:21
Hi all, is there any way to get current scope for element via can-component events?
Component.extend({
  ...
  events: {
    ".listItem click": function(){
      // here i would like to get a data assotiated with current list item
    }    
  }
})
Kevin Phillips
@phillipskevin
Aug 18 2017 12:57
@AntonProkofyev you can access the viewModel with this.viewModel
but the better way would be to use can-stache-bindings to do something like <li class="listItem" ($click)="clickHandler(this)">
and have a clickHandler: function(item) { ... } on your viewModel
we are live :-)
Justin Meyer
@justinbmeyer
Aug 18 2017 16:11
just finished going through all the cool stream stuff
Gregg Roemhildt
@roemhildtg
Aug 18 2017 18:40
Inline partials are awesome. Are they available in the scope for other partials to use? So if I have
{{<partialName}}
  <li>
    {{.name}}
    <ul>
      {{#each .children}}
        {{>partialName .}}
      {{/each}}
    </ul>
  </li>
{{/partialName}}

<ul>
  {{>otherPartial}} <!-- can otherPartial access partial "partialName"? -->
  <li>( {{message}} )</li>
</ul>
James Atherton
@James0x57
Aug 18 2017 18:43
I didn't specifically test that, but that should work no problem - just declare both named partials in the template and they should be able to reference each other
Glad you like it :D
Gregg Roemhildt
@roemhildtg
Aug 18 2017 18:47
I do. I also just learned you can pass a scope to a partial
James Atherton
@James0x57
Aug 18 2017 18:48
Just tested, they can reference each other:
    test('named partials can reference each other (canjs/can-stache/issues/3)', function(){
        var template = "{{<foo}}hello {{>bar}}{{/foo}} {{<bar}}world{{/bar}} <span>Test:</span><div>{{>foo}}</div>";
        var intermediate = parser( template, {}, true );

        var renderer = stache(intermediate);
        var data = new CanMap( {} );
        var frag = renderer( data );

        equal( innerHTML( frag.lastChild ), "hello world" );;
    });
Gregg Roemhildt
@roemhildtg
Aug 18 2017 18:53
So I could do something like
{{<name}}
{{#if userName}}
<b>{{userName}}</b> <!-- if username exists render bold username -->
{{else}}
{{>bar}} <!-- otherwise render a default partial defined in the template-->
{{/if}}
{{>name}}
for example
James Atherton
@James0x57
Aug 18 2017 19:00
Sure. I imagine it'll be used for more complex composition but that'd work as a test. Gotta close the {{<name}} tag with {{/name}} though
Gregg Roemhildt
@roemhildtg
Aug 18 2017 19:06
Yup, good catch. I use partials a lot, (maybe too much) to override different parts of a page component based on a data type. So now I could create the partial in the template and if a partial gets passed to the component, that partial can render the partial defined in the template if it wants to
James Atherton
@James0x57
Aug 18 2017 19:14
yup
:)