These are chat archives for canjs/canjs

10th
Jun 2016
qantourisc
@qantourisc
Jun 10 2016 14:12
Still in doubt about controller vs component. I found canjs/canjs#1772 . Components seem to have the distinct disadvantage of not being able to to use init: (it's ran twice) and it's hard to reference them without some trickery.
(Reference meaning debug by accessing the component, atm I am bascially doing window.instances.push(this); in the init:
Kevin Phillips
@phillipskevin
Jun 10 2016 14:20
for code you want to run when the component is initialized, use the inserted event: https://canjs.com/docs/can.events.inserted.html
you can access the component’s viewmodel with either can.viewModel(‘my-component’) or $(‘my-component’).viewModel()
what else are you looking to reference for debugging, @qantourisc?
the advantage of components is that nearly all of your logic will go in the viewmodel, which is significantly easier to test.
Guido Smeets
@gsmeets
Jun 10 2016 14:27
does anyone have an example of a documented component with jsdoc comments, and the documentjs output that creates?
qantourisc
@qantourisc
Jun 10 2016 14:29
@phillipskevin: those answers look nice. I do wonder why the can.Component and can.Map have 2 instances, or is this because i'm trying to monitor them ?
Kevin Phillips
@phillipskevin
Jun 10 2016 14:35
I’m not sure what you mean
when are there two instances?
qantourisc
@qantourisc
Jun 10 2016 14:37
If you put ~ window.test=Array; can.Component.extend({ init: function(){ windows.test.push(this) }) you get 2 objects in there with linked viewModels, but that might just be due to javascript not cleaning up objects because i'm keeping a reference open to these by doing it the wrong way.
Kevin Phillips
@phillipskevin
Jun 10 2016 14:42
I don’t see that
qantourisc
@qantourisc
Jun 10 2016 14:45
hmmm, i'd need to make a testcase. I'll first do it the correct way, if the problem persists i'l make a test-case (probably revealing my own mistake)
Edit: Seems to at least not bind double. If I re-add init: it still runs twice, I will still need to debug this to figure out why this happening. I'll post a new post when I have the details.
Kevin Phillips
@phillipskevin
Jun 10 2016 14:53
ok, sounds good
@gsmeets: the components in BitBalls are documented well: https://github.com/donejs/bitballs/blob/master/public/components/game/details/details.js
I’m not sure if the documentjs output is anywhere
but you could always pull it down and run the document script
actually, they are published: http://donejs.github.io/bitballs/docs/index.html
Guido Smeets
@gsmeets
Jun 10 2016 15:06
Cheers
qantourisc
@qantourisc
Jun 10 2016 15:07
@phillipskevin I seem to have a duplicate trigger in my can-route causing the component in a {{#switch}} statement to be initialized twice. + Combined with the init weirdness occured :D
Kevin Phillips
@phillipskevin
Jun 10 2016 15:07
ah, ok
so the component is probably destroyed in between
qantourisc
@qantourisc
Jun 10 2016 15:11
event: removed: function () { console.log("I die") } -> confirmed. Thanks for the feedback, think you save me about a day of learning of canjs. CanJS is nice, but it's steep learning curve (specially if your javascript knowledge is not so deep)
PS is there a saner way then a switch bases on a route ? (to load different tabs/components) (write the HTML using dom ?)
Kevin Phillips
@phillipskevin
Jun 10 2016 15:15
not that I know of
qantourisc
@qantourisc
Jun 10 2016 15:16
Well if you have controllers (and a mutlipage app) you can do like <div id="controller" class="mycontrollername"> and then see if it's present in the in window scope and then render it.
Kevin Phillips
@phillipskevin
Jun 10 2016 15:18
this is generally what I’ve done in recent apps: https://donejs.com/Guide.html#section=section_Switchbetweenpages
qantourisc
@qantourisc
Jun 10 2016 15:45
Hmmm this is weird, when I change the route back and forth, the object is restored with all it's all paramaters
I wonder if i'm maybe binding to the prototype.
Kevin Phillips
@phillipskevin
Jun 10 2016 16:21
it is being removed though?
Thomas Sieverding
@Bajix
Jun 10 2016 19:48
Is there a supported shorthand for assigning a compute to a define property
qantourisc
@qantourisc
Jun 10 2016 19:56
@phillipskevin Yes, found the error can.Component.extend({ viewModel: { member: new can.Map() } }) causes the prototype, and the instance to contain the object I new-ed there, ( aka: new objects from the extended Component are shallow copies). I'm not sure however what the right CanJS method is to do this.
Kevin Phillips
@phillipskevin
Jun 10 2016 19:57
you shuold set the viewModel property as a constructor
qantourisc
@qantourisc
Jun 10 2016 19:57
@Bajix you mean the can.Map.extend({define:{}}) that define ? and what sort of define ? (i"m green so I might be asking a stupid question)
Kevin Phillips
@phillipskevin
Jun 10 2016 19:58
otherwise each instance of the component will share a viewModel
qantourisc
@qantourisc
Jun 10 2016 20:00
I noticed :D And constructor works nicely (not use to javascript, sooo much meta-coding :D)
Kevin Phillips
@phillipskevin
Jun 10 2016 20:01
what language do you come from?
or what do you use most often
qantourisc
@qantourisc
Jun 10 2016 20:17
from C++ (in school / hobby) to Python, but lately i've seen quite a bit of meta in the python I wrote myself
PS. this also means a lot of the events:inserted can move into the viewModel constructor, cause it's mainly about the model bind-triggered data-manipulations
Kevin Phillips
@phillipskevin
Jun 10 2016 20:23
yep
qantourisc
@qantourisc
Jun 10 2016 20:26
But I feel dirty constructing function for each instance of it. So I should move some out.
Probably just the C++ in me talking there though
Kevin Phillips
@phillipskevin
Jun 10 2016 20:29
I’m not sure what you mean
most of the time, people use can.Maps with the define plugin to create the viewmodel constuctor
qantourisc
@qantourisc
Jun 10 2016 20:37
I just released i'm wrong, its in the prototype and the constructor does not get copied
Kevin Phillips
@phillipskevin
Jun 10 2016 20:38
right, that’s what extend does
adds those properties to the prototype
Thomas Sieverding
@Bajix
Jun 10 2016 20:46
@qantourisc
var val = can.compute();

can.Map.extend({
  define: {
    val: // hookup with the above compute
  }
});
Kevin Phillips
@phillipskevin
Jun 10 2016 20:48
why do you need to use the define plugin?
Thomas Sieverding
@Bajix
Jun 10 2016 20:49
Have a lexically global variable that can be bound to and included on the map
Kevin Phillips
@phillipskevin
Jun 10 2016 20:50
var val = can.compute();

can.Map.extend({
  define: {
  },
  val: val
});
would that not work?
Thomas Sieverding
@Bajix
Jun 10 2016 20:51
Newp
Maybe val.computeInstance.bind(val)
qantourisc @qantourisc is not sure if you wish to set val to be a reference to the global val, if you wish to calc the val at the point of construction, or some other combination.
Thomas Sieverding
@Bajix
Jun 10 2016 21:04
I want it to read from and set to that compute
Obviously this can be done w/ some closures, but wasn’t sure if there was any shorter way
qantourisc
@qantourisc
Jun 10 2016 21:06
still think what keving sais works, but i'm a noob
Thomas Sieverding
@Bajix
Jun 10 2016 21:08
It clones the compute
So that’s a confusing non-bo
At least it’s on the way out
qantourisc
@qantourisc
Jun 10 2016 21:12
try to put in init: ?
Justin Meyer
@justinbmeyer
Jun 10 2016 21:15
@Bajix can't you have a define.get
that just reads that compute
Thomas Sieverding
@Bajix
Jun 10 2016 21:15
Oh yea absolutely, I was just asking about shorthand
Justin Meyer
@justinbmeyer
Jun 10 2016 21:16
there's no shorthand. You might be able to get by with the "compute" type and value: compute
Thomas Sieverding
@Bajix
Jun 10 2016 21:16
I’m not stuck in any way here, just was curious
Justin Meyer
@justinbmeyer
Jun 10 2016 21:16
but my guess is you'd have to do
type: "compute",
value: function(){return globalCompute; }
which isn't any shorter than
Thomas Sieverding
@Bajix
Jun 10 2016 21:16
I really thought that compute.computeInstance was going to work
Justin Meyer
@justinbmeyer
Jun 10 2016 21:17
get: function(){ return globalCompute() }
Thomas Sieverding
@Bajix
Jun 10 2016 21:17
yea, that’s what I had already been doing
Thomas Sieverding
@Bajix
Jun 10 2016 22:00
@justinbmeyer What would you think of giving can.Component the equivalent of can-connect/can/super-map? The use case would be to switch between templates, and re-cycle component’s of the same id w/ updated props. Those changes could then be used for doing things like animations