These are chat archives for canjs/canjs

30th
Nov 2017
Gregg Roemhildt
@roemhildtg
Nov 30 2017 14:55
So I'm getting lots of Maximum call stack exceeded errors in the can 3.12.1
Justin Meyer
@justinbmeyer
Nov 30 2017 15:22
@roemhildtg you just got them with this version?

Can I do something like this? [SLOTS EXAMPLE]

You can't ... slots are not currently dynamic in that way.

Andrei Balmus
@abalmush
Nov 30 2017 15:24
Hello @justinbmeyer sorry for disturbing, again me with Canjs migration, I’m trying to understand how to get import ‘can/map/validations’; to work. Before I used this import to extend set of validation rules in my validation framework. Now it looks like can-map doesn’t contain that validation rules :(
Justin Meyer
@justinbmeyer
Nov 30 2017 15:24
It might be possible to make that work. The "slot" registry would itself have to be observable.
Gregg Roemhildt
@roemhildtg
Nov 30 2017 15:24
Yup, I did get them just in that version
Justin Meyer
@justinbmeyer
Nov 30 2017 15:25
@roemhildtg can you create an issue and hopefully provide a breaking example. We can get someone on that right away.
I'm unable to guess at what's going on w/ just the callstack. @phillipskevin might have an idea.
Andrei Balmus
@abalmush
Nov 30 2017 15:26
thank you!
Gregg Roemhildt
@roemhildtg
Nov 30 2017 15:26
I'm looking into providing an example. Just not sure where to start with this one
Justin Meyer
@justinbmeyer
Nov 30 2017 15:28
so where these things tend to happen are situations where a getter is also changing itself
Gregg Roemhildt
@roemhildtg
Nov 30 2017 15:28
Hmm, yeah that could be happening. I'll look into that first
Justin Meyer
@justinbmeyer
Nov 30 2017 15:28
though 3.12 shouldn't have "added" a problem like this
Kevin Phillips
@phillipskevin
Nov 30 2017 15:28
you can try putting a breakpoint here: https://github.com/canjs/can-view-live/blob/master/lib/html.js#L47 and seeing what that compute is
Justin Meyer
@justinbmeyer
Nov 30 2017 15:29
4.0's can-queues would help make this more obvious :P
Gregg Roemhildt
@roemhildtg
Nov 30 2017 15:31
Yeah I'm looking forward to that!
Gregg Roemhildt
@roemhildtg
Nov 30 2017 15:48
so the compute appears to be an Observation object -
image.png
That compute gets logged hundreds of times before the error
Kevin Phillips
@phillipskevin
Nov 30 2017 15:59
what is the func?
Gregg Roemhildt
@roemhildtg
Nov 30 2017 16:05
Its the "each" helper. And items in the each helper is "undefined" for some reason.
Kevin Phillips
@phillipskevin
Nov 30 2017 16:11
can you look at the compute in newObserved?
maybe that will help narrow down where the {{#each}} is in your code
Gregg Roemhildt
@roemhildtg
Nov 30 2017 16:17
I think I've found where the each is, and I'm looking into what's causing it. I'll let you know if I come up with anything that might be helpful
Gregg Roemhildt
@roemhildtg
Nov 30 2017 16:37
I think I solved part of the issue. I had an template that was using {{#each iterable}} and the iterable was "undefined"
Yup, that was it
Gregg Roemhildt
@roemhildtg
Nov 30 2017 16:43
Which is weird because I can't make it produce the error in a simple example
Kevin Phillips
@phillipskevin
Nov 30 2017 16:47
yeah, I tried that also
Gregg Roemhildt
@roemhildtg
Nov 30 2017 16:50
anywho, setting the default value solves it for now... :confused: maybe when can-queues gets released it'll be more obvious
Gregg Roemhildt
@roemhildtg
Nov 30 2017 17:43
I've got a quick question about bubbling up events. Lets say I've got a child component wrapped with a parent component. Now I embed the parent component in a 3rd component, call it parent 2, can I listen to events from the child component in the parent 2 component?
Like in parent-2:
<parent on:child:customChildEvent="callFunction" />
I don't think that's possible like I wrote it since the parent doesn't have a child property on its view model...child is the component inside of the parent component template
But is there an alternative?
Justin Meyer
@justinbmeyer
Nov 30 2017 18:49
what do you mean by "wrapped with"?
the parent can listen to values on its child, and dispatch them on itself
<child on:childEvent="dispatch.apply(scope.viewModel, scope.arguments)">
(might have a method called "forward" to avoid the .apply)
cc @roemhildtg
Gregg Roemhildt
@roemhildtg
Nov 30 2017 19:14
That's what I was looking for I think. The only issue is, the arguments change. I think dispatch does some processing to wrap the aruments in an array or something, last time I attempted this. I'll demonstrate it in a jsbin when I have some time, but the child's event arguments will be different than the parents event arguments.
That might be because I wasn't using apply though
I was just this.dispatch(arguments[2].type, arguments)
DaveO
@DaveO-Home
Nov 30 2017 21:25

Having ES6 problem with Component.extend ..

ES5 version on ViewModel

Component.extend({
                tag: "jobtype-selector",
                view: Stache(`<select  class='jobtype-selector' value:bind='selectedJobType'>${this.getOptions(osKeys, values)}</select>`),
                ViewModel: function () {
                    var selectedJobType = {selectedJobType: current};
                    return new Map(selectedJobType);
                }, ....

ES6 version on ViewModel

Component.extend({
                tag: "jobtype-selector",
                view: Stache(`<select  class='jobtype-selector' value:bind='selectedJobType'>${this.getOptions(osKeys, values)}</select>`),
                ViewModel() {
                    const selectedJobType = {selectedJobType: current};
                    return new Map(selectedJobType);
                }, ....

The ES6 version errors on - Uncaught TypeError: component.constructor.ViewModel is not a constructor thrown
Note:
ES6 on normal Objects work..like

getOptions(keys, values) {

        if (!values || values.length !== keys.length) {
            values = keys;
        }

        let options = "<option value=''></option>";
        for (let i = 0; i < keys.length; i++) {
            options = `${options}<option value='${values[i]}'>${keys[i]}</option>`;
        }

        return options;
    },
Kevin Phillips
@phillipskevin
Nov 30 2017 21:29
perhaps it's using the es6 Map instead of can-map @DaveO-Home ?
try importing it as CanMap and change return new Map(selectedJobType); to return new CanMap(selectedJobType);
DaveO
@DaveO-Home
Nov 30 2017 21:31
Yes, I'm using can/map/map ... looking for can-map
Kevin Phillips
@phillipskevin
Nov 30 2017 21:31
sorry... can/map/map is fine
but name it something else
so it doesn't conflict with the native Map constructor
DaveO
@DaveO-Home
Nov 30 2017 21:39
@phillipskevin - Yep, that did the job - thanks
Kevin Phillips
@phillipskevin
Nov 30 2017 21:39
great, you're welcome
DaveO
@DaveO-Home
Nov 30 2017 21:50
@phillipskevin - damn, I had the es5 still in place, I changed Map to MapMap and I load using const MapMap = require("can/map/map");
Justin Meyer
@justinbmeyer
Nov 30 2017 22:46
@DaveO-Home we call it CanMap generally
DaveO
@DaveO-Home
Nov 30 2017 22:57
@justinbmeyer @phillipskevin - Same error with CanMap - perhaps the "can/map/map" is wrong...
Kevin Phillips
@phillipskevin
Nov 30 2017 22:59
what version of can are you using?
DaveO
@DaveO-Home
Nov 30 2017 23:01
Latest - 3.12.1 - did full install
I just changed the require to require("can-map") same problem