These are chat archives for canjs/canjs

24th
Jul 2018
Gregg Roemhildt
@roemhildtg
Jul 24 2018 13:35

Can anyone explain why my can stache converter isn't working correctly? It looks like this:

stache.registerConverter('stringToList', {
    get(list) {
        const returnValue = list.join(',');
        return returnValue;
    },
    set(str) {
        const returnValue = str.split(',').map((num) => parseInt(num) );
        return returnValue;
    },
});

Basically, I have a comma separated array of numbers as a string and an array I want to keep in sync.

<input type="text" value:bind="stringToList(datasets.0.data)" />
datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1,
    }]
It's getting reset in this "sticky" section in can-bind
        // Stickiness is used in cases where the call to args.setValue above might
        // have resulted in the observable being set to a different value than what
        // was passed into this function (args.newValue). If sticky:true, then set
        // the partner observable’s value so they’re kept in sync.
        if (args.sticky) {
            var observableValue = canReflect.getValue(args.observable);
            if (observableValue !== canReflect.getValue(args.partner)) {
                args.setPartner(observableValue, args.partner);
            }
        }
Matthew Phillips
@matthewp
Jul 24 2018 13:36
cc @justinbmeyer @phillipskevin ^^ any ideas?
Justin Meyer
@justinbmeyer
Jul 24 2018 13:53
Will check it out in about 10 min
Gregg Roemhildt
@roemhildtg
Jul 24 2018 13:55
Justin Meyer
@justinbmeyer
Jul 24 2018 14:14
thanks
oh, I think the getter isn't changing the value
setters don't return
they need to change one of their arguments
Gregg Roemhildt
@roemhildtg
Jul 24 2018 14:21
Ah. I see it
That helps! thank you
Justin Meyer
@justinbmeyer
Jul 24 2018 14:21
Basically, the set method needs to update the "right hand" value:
set(str, list) {
              console.log("set",arguments)
        const returnValue = str.split(',').map((num) => parseInt(num) );
       list.update(returnValue);
    }
Gregg Roemhildt
@roemhildtg
Jul 24 2018 14:23
Gotcha. That makes sense. What if I wasn't updating a list? Like if I were updating aprimitive Would the return value be used?
In that case does the value that gets passed become a compute?
Ivo Pinheiro
@ivospinheiro
Jul 24 2018 15:57
Hi!
I'm working on upgrading an application from CanJS 3.8 to the latest version
But I've noticed that the CanMap.attr() function behavior has changed on release 3.9.0
On the log I was expecting that the "prop" property would be an instance of MyClass
And it is a plainObject
Ivo Pinheiro
@ivospinheiro
Jul 24 2018 16:03
If I uncomment the import from 3.8.0 it works fine
Kevin Phillips
@phillipskevin
Jul 24 2018 16:22
x.prop1.prop1 instanceof MyClass // -> true
is that what you mean?
Justin Meyer
@justinbmeyer
Jul 24 2018 16:23
yeah
I'm looking at it @phillipskevin
Ivo Pinheiro
@ivospinheiro
Jul 24 2018 16:24
Exaclty
Kevin Phillips
@phillipskevin
Jul 24 2018 16:24
well, that is correct
Ivo Pinheiro
@ivospinheiro
Jul 24 2018 16:24
It seems I've shared the wrong link https://jsbin.com/mejejalice/edit?html,js,console,output
Kevin Phillips
@phillipskevin
Jul 24 2018 16:24
but x.prop1.prop1 !== x.attr().prop1.prop1
Justin Meyer
@justinbmeyer
Jul 24 2018 16:24
yeah
my guess is that canReflect changed it to serialize MyClass
trying to see where ...
Kevin Phillips
@phillipskevin
Jul 24 2018 16:25
yeah, that's what it seems like
Ivo Pinheiro
@ivospinheiro
Jul 24 2018 16:25
I've debugged the code and it seems so
Justin Meyer
@justinbmeyer
Jul 24 2018 16:26
I think you could just add an can.unwrap symbol
as a work around
class MyClass {
  constructor(val1){
    this.val1 = val1;
  }
}
MyClass.prototype[Symbol.for("can.unwrap")] = function(){
  return this;
}
that works as a work around
if you need IE support, use can-symbol
Ivo Pinheiro
@ivospinheiro
Jul 24 2018 16:28
Ok let me try
Kevin Phillips
@phillipskevin
Jul 24 2018 16:29
Justin Meyer
@justinbmeyer
Jul 24 2018 16:30

not sure if this is what you mean, but it used to skip everything that wasn't observable:

https://github.com/canjs/can-map/blob/v3.0.0/map-helpers.js#L81

can-reflect will eachKey() everything:
this.eachKey(value, function (childValue, prop) {
                        serialized[prop] = this[methodName](childValue);
                    }, this);
Ivo Pinheiro
@ivospinheiro
Jul 24 2018 16:32
It works!!!
Thanks!
Justin Meyer
@justinbmeyer
Jul 24 2018 16:32
np .. though I'm still not sure what to do about the bug ...
I'm going to create an issue ... your work around should be fine though
Ivo Pinheiro
@ivospinheiro
Jul 24 2018 16:34
Please share with link to the issue in order to follow it
Justin Meyer
@justinbmeyer
Jul 24 2018 16:53
canjs/can-map#111
Jotted some initial thoughts on how to fix it for others
Ivo Pinheiro
@ivospinheiro
Jul 24 2018 16:54
Thanks @justinbmeyer
Kevin Phillips
@phillipskevin
Jul 24 2018 16:56
@ivospinheiro what broke in your app because of this?
Ivo Pinheiro
@ivospinheiro
Jul 24 2018 16:57
Some unit tests start failing
Basically because we ere using the https://github.com/rauschma/enumify package to have enum properties
And some of the CanMap's properties values are enum properties
Kevin Phillips
@phillipskevin
Jul 24 2018 17:00
so your test was doing something like equal( foo.attr().color, Color.Red) ?
Ivo Pinheiro
@ivospinheiro
Jul 24 2018 17:00
That with .attr() are being converted to plain objects
More like deepEqual( foo.attr(), {color: Color.Red})
Kevin Phillips
@phillipskevin
Jul 24 2018 17:03
ok
I'm just trying to think through any places where application code might rely on this behavior
or whether it primarily impacts tests
someone obviously could be relying on it in app code
Ivo Pinheiro
@ivospinheiro
Jul 24 2018 17:05
I think that most of our usages are on tests
Kevin Phillips
@phillipskevin
Jul 24 2018 17:05
ok thanks
Julian
@pYr0x
Jul 24 2018 17:23
hey kevin
are you around?
Julian
@pYr0x
Jul 24 2018 17:57
is it possible to pass a "loader image" inside a component like
<x-form-simple-daterange
    vm:start:u:name:raw="form[datum][start]"
    vm:end:u:name:raw="form[datum][ende]">
    <div class="spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>
  </x-form-simple-daterange>
and replace the inner html with the view of the component if its loaded complete
Matthew Phillips
@matthewp
Jul 24 2018 18:06
isn't this <content/>?
Julian
@pYr0x
Jul 24 2018 18:09
export default Component.extend({
  tag: "x-form-simple-daterange",
  ViewModel,
  view: "<content/>",
  events: {}
});
?
and how gets the view (stache template) past in?
Bridget Carberry
@bcarberry
Jul 24 2018 18:13
Hi again. I'm interested in defining transition animations for when my template is updated due to data in an observable map changing. Is this currently possible with existing CanJS functionality? Right now, I see my templates update immediately with the new data, as expected, but I'd like to get an animation in there. I know there is a proposal for improvements here: canjs/canjs#3864
Justin Meyer
@justinbmeyer
Jul 24 2018 21:23
@bcarberry it's possible, you can use the inserted event to change the styles after insertion
doing an animation on remove is trickier
for example:
{{# each(things) }}
  <li style="display:none" on:inserted="fadeIn(scope.element)"> ... </li>
{{/each}}
also, you can use on:EVENT:by:THING to listen to events and call other animation functions
<div on:updated:by:todo="animate(scope.element)"> .. </div>
@/all I know this is last min, but if anyone wants to attend a free JS, DOM, CanJS, StealJS, DoneJS training next week in Chicago, you are invited ...