These are chat archives for canjs/canjs

12th
Apr 2018
Gregg Roemhildt
@roemhildtg
Apr 12 2018 13:28
Does the define map support this? Running each prop through a "type" converter?
locationCache: DefineMap.extend({
    '*': {
      type (val) { return Math.round(val * 100) / 100; }
    }
  }),
Kevin Phillips
@phillipskevin
Apr 12 2018 13:37
yeah
Gregg Roemhildt
@roemhildtg
Apr 12 2018 13:43
Hmm, I don't think its working though. If I change '*' to the property name it runs the function
Kevin Phillips
@phillipskevin
Apr 12 2018 13:45
ok, I'll try it real quick
Kevin Phillips
@phillipskevin
Apr 12 2018 13:47
that just looks like the starter JSBin
Gregg Roemhildt
@roemhildtg
Apr 12 2018 13:48
Oh I see. You still gotta define the prop names
Kevin Phillips
@phillipskevin
Apr 12 2018 13:50
oh, I see what you're saying
it doesn't run for properties that aren't defined
Gregg Roemhildt
@roemhildtg
Apr 12 2018 13:50
Correct.
Kevin Phillips
@phillipskevin
Apr 12 2018 13:52
yeah, we could document that better
if you use .set()it will run it for non-defined properties
Gregg Roemhildt
@roemhildtg
Apr 12 2018 13:53
like
  locationCache: DefineMap.extend({
    '*': {
      set (val) { return Math.round(val * 100) / 100; }
    }
  }),
Kevin Phillips
@phillipskevin
Apr 12 2018 13:53
no, sorry
var VM = can.DefineMap.extend({
  "*": {
    type: function(val) {
      return ("" + val).toUpperCase();
    }
  }
});

var vm = new VM();

vm.set("foo", "bar");
vm.set("abc", 1);
Gregg Roemhildt
@roemhildtg
Apr 12 2018 13:54
Oh gotcha
I thought set was deprecated?
Kevin Phillips
@phillipskevin
Apr 12 2018 13:55
that's a common confusion... it's not
it's only deprecated when passed an object
deprecated:
vm.set({
  "foo": "bar",
  "abc": 1
});
Gregg Roemhildt
@roemhildtg
Apr 12 2018 13:55
Ah okay
Kevin Phillips
@phillipskevin
Apr 12 2018 13:56
use these instead:
vm.assign({
  "foo": "bar",
  "abc": 1
});

// OR
vm.update({
  "foo": "bar",
  "abc": 1
});
those also will run through the typeconverter
Marc Godard
@MarcGodard
Apr 12 2018 17:14

@phillipskevin

I added this to my app.js vm and no go... doesn't display the console log on page change. Doesn't seem to even call connectedCallback.

  connectedCallback () {
    console.log("here", this.serialize())

    // create an observable for the entire serialized route data
    let serializedRoute = new Observation(() => this.serialize())

    // track _any_ changes to the route data
    canReflect.onValue(serializedRoute, () => {
      console.log('route change')
    })

    // stop listening to route changes when this component is cleaned up
    return () => {
      canReflect.offValue(serializedRoute)
    }
  }

Any ideas?

This is a donejs2 app fyi.
Kevin Phillips
@phillipskevin
Apr 12 2018 18:10
the connectedCallback is called when you component is added to the page
hmm... that probably doesn't work for the AppVM
since it's not part of a component
you can just do that outside of the connectedCallback @MarcGodard
outside of the component entirely... where you're setting up your routes
Marc Godard
@MarcGodard
Apr 12 2018 18:13
@phillipskevin how do I do that?
Make a new component?
Or do you mean below it like where you register the routes?
Kevin Phillips
@phillipskevin
Apr 12 2018 18:14
yeah, down where you register routes
you don't need a component
instead of this.serialize() do route.data.serialize()
Marc Godard
@MarcGodard
Apr 12 2018 18:21
@phillipskevin ok let me try that :)
@phillipskevin nope, nothing on route change.
Kevin Phillips
@phillipskevin
Apr 12 2018 18:24
I'll try it, one sec
Marc Godard
@MarcGodard
Apr 12 2018 18:29
Thanks, I appreciate your effort.
Kevin Phillips
@phillipskevin
Apr 12 2018 18:33
ok, you can't do it right away... because route.data isn't set until after
this works:
setTimeout(() => {
  var serializedRoute = new Observation(() => route.data.serialize());
  canReflect.onValue(serializedRoute, () => {
    console.log("route changed");
  });
});
but let me figure out a better way
Kevin Phillips
@phillipskevin
Apr 12 2018 18:42
so I'm not sure what the best solution is in a donejs app
since route.data is set behind the scenes
you can just do
route.on("__url", () => {
  console.log("route changed");
});
but that's not a documented feature
so could change
Marc Godard
@MarcGodard
Apr 12 2018 19:37
@phillipskevin thanks will try that one out. If it changes I can figureout something else.
Works well :) Thanks man
Kevin Phillips
@phillipskevin
Apr 12 2018 19:48
yeah, glad it work
Justin Meyer
@justinbmeyer
Apr 12 2018 20:48
Pretty solid turnout of yesterday's DoneJS Meetup: https://twitter.com/donejs/status/984529030459293698