These are chat archives for canjs/canjs

29th
Nov 2017
Eben
@eben-roux
Nov 29 2017 04:11
@phillipskevin yip... instead of bypassing the scope lookup by specifying some "escape" indicator in the attribute value, rather use something explicit
else it may very be that the "escape" indicator (' - single quote for string) may well need to be escaped if that has to be part of the value also
a stache binding like propName:value="the-value" (or some such) is rather explicit
but again, this is assuming that my understanding that prop-name="value" is going to be deprecated is correct
hemanthjamili
@hemanthjamili
Nov 29 2017 15:25
Hello Everyone, I am Hemanth.
I am good in javascript and jquery. Now I am interested to learn CanJS. So Can anyone please help me out in How to start canjs? Where CanJS comes into picture?
Justin Meyer
@justinbmeyer
Nov 29 2017 15:29
@hemanthjamili CanJS is mostly used to simplify the state <-> DOM interaction
meaning, say you wanted to click a button and simply show a number incrementing
w/ jQuery, you could do it like:
var state = {count: 0};

$("#your-button").on("click", function(){
  $("#your-count-number").text( state.count ++ )
})
Andrei Balmus
@abalmush
Nov 29 2017 15:31
Hi guys, I’m trying to migrate to CanJS 3 and I cant find out how to get can.trigger
is there any separate package? I cant find it in utils anymore
Justin Meyer
@justinbmeyer
Nov 29 2017 15:31
can-event is what you're looking for @abalmush
are you just looking for dispatching custom elements?
Andrei Balmus
@abalmush
Nov 29 2017 15:32
oh, thank you @justinbmeyer ! I will try it out, yeah it was look like this before:
can.trigger(this, { type: 'activateOrderDetails', detail: { code: code } });
Andrei Balmus
@abalmush
Nov 29 2017 15:33
Thank you a lot!
Justin Meyer
@justinbmeyer
Nov 29 2017 15:34
you'll probably need to change it to canEvent.dispatch.call(this, { type: ... }})
btw, is this a Map or an element?
if it's a Map type ... should just be able to do:
this.dispatch({type: ....})
@hemanthjamili ... so that jQuery code ... it's alright, but things would get out of hand quickly as other parts of your app might need to change if state.count changes.
Andrei Balmus
@abalmush
Nov 29 2017 15:35
@justinbmeyer , this equal to viewModel inside a Component
Justin Meyer
@justinbmeyer
Nov 29 2017 15:36
then it's a can.Map if you're coming from 2.3
Andrei Balmus
@abalmush
Nov 29 2017 15:36
yeah exactly
Justin Meyer
@justinbmeyer
Nov 29 2017 15:36
you should be able to just do this.dispatch({ ... })
Andrei Balmus
@abalmush
Nov 29 2017 15:36
thats great, checking it
Justin Meyer
@justinbmeyer
Nov 29 2017 15:36
btw, are you using the code-mods?
Andrei Balmus
@abalmush
Nov 29 2017 15:37
no not sure what is code-mods
I’m using your migration guide
Andrei Balmus
@abalmush
Nov 29 2017 15:38
ok oh, I will check this out thanks
Justin Meyer
@justinbmeyer
Nov 29 2017 15:38
yeah, it can rewrite many of the 2.3 -> 3.0 transformations
Andrei Balmus
@abalmush
Nov 29 2017 15:38
wow, I did all this stuff manually
haha
thank you!!!!!
Justin Meyer
@justinbmeyer
Nov 29 2017 15:39
np
@hemanthjamili while the jQuery stuff up above is ok, things can quickly get out of hand as the number of interactions between the DOM and your state grow. CanJS's live-binding and observables help with this.
In CanJS, you define your state separate from the DOM .. so I might create an adder class like:
var Adder = DefineMap.extend({
  count: "number",
  add: function(){
    this.count++
  }
})
Andrei Balmus
@abalmush
Nov 29 2017 15:41
codemods will be a huge help, I’m trying to migrate all my clients to Canjs 3, Thanks a lot!
Justin Meyer
@justinbmeyer
Nov 29 2017 15:42
@abalmush np, folks like @bgando @phillipskevin @nlundquist built all of that stuff ... they deserve all the praise.
btw, if you find things that are missing, it's not hard to create your own code-mods and share them back :-)
Andrei Balmus
@abalmush
Nov 29 2017 15:42
Absolutelly! Thank you guys!
hemanthjamili
@hemanthjamili
Nov 29 2017 15:42
@justinbmeyer Thanks for your valuable responses :smile:
Andrei Balmus
@abalmush
Nov 29 2017 15:43
Ok I will share if I find something
Justin Meyer
@justinbmeyer
Nov 29 2017 15:43
@hemanthjamili no problem ... continuing on ...
Once you have your type, you might create a stache template that interacts with instances of the Adder type above like:
var view = stache(`<button on:click="add()"> + 1 </button> The count is {{count}} `)
finally, you'd render that view with an instance of adder and put the result in your page like:
var adder = new Adder(); // instance
var documentFragment = view( adder ) // rendering
document.body.appendChild( documentFragment )
now when someone clicks the button, it calls Adder's add method. When count is changed, the DOM is automatically updated.
hemanthjamili
@hemanthjamili
Nov 29 2017 16:17
@justinbmeyer Thanks for your explaination.
@justinbmeyer Is there any tutorial to learn CanJS and master in it
Justin Meyer
@justinbmeyer
Nov 29 2017 16:46
yes, many on canjs.com
@/all I'll be going over the workings of the "big" change to CanJS 4.0 - can-queues - today in a live-stream: https://twitter.com/canjs/status/935911493664739328
Gregg Roemhildt
@roemhildtg
Nov 29 2017 17:35
This is really cool. I didn't expect it to work, but it totally does:
{{#with( historyPromise(id, props.table))}}
       {{#if (isPending)}}
            <div class="loading" />
        {{else}}
            <list-table objects:from="value" fields:from="historyFields" />
        {{/if}}
{{/with}}
Once the historyPromise function (which returns a Promise) resolves, the table gets displayed
Speaking of the new {{ if( args) }} syntax, is there any code mods for updating those?
Justin Meyer
@justinbmeyer
Nov 29 2017 19:43
@roemhildtg not currently. Once 4.0 is released, we'll "backtrack" and start making mods to help people go 3.X -> 4.X
btw, yeah, that's cool ... being able to dynamically get the promise w/i the template like that
Gregg Roemhildt
@roemhildtg
Nov 29 2017 20:44
hey, question on can-slot. Can I do something like this?
{{#each(additionalSlots)}}
    <can-slot name="{{name}}" />
{{/each}}