These are chat archives for canjs/canjs

14th
May 2018
Justin Meyer
@justinbmeyer
May 14 2018 01:18
Could field, operation, etc be passed together to criterion? @dbleier
There’s a stache proposal for the 2nd case
canjs/can-stache#505
I can go into more detail tomorrow
Nico R.
@nriesco
May 14 2018 04:38
Is there a way to make a list of elements to be rendered “slowly”? I have a search results page that seems to be loading every result at the same time, but only a few are visible. So if the page rendered 4-12 items first and then start adding items slowly it would look and feel faster. Is there anything like that? I use supermap and can-connect-feathers
Nico R.
@nriesco
May 14 2018 04:54
I guess the question is how to implement infinite scrolling using canjs
Nico R.
@nriesco
May 14 2018 06:45
After doing some tests I manage to change the class of an html element. Is it possible for the viewmodel to “listen” to class changes? For instance if its visible I add the class ‘show’. I would like the stache to have {{#if(show)}}show this text{{/if}} That way the whole component (here is represented by text only) is loaded conditionally.
a presudo code would be
<div class=""> <!-- the show class will be added to this element -->
  {{#if(hasClas('show'))}}
    ... some code
  {{/if}}
</div>
Viktor Busko
@Lighttree
May 14 2018 07:18
Hi guys what is the package versions for can3@latest ? On API page I see these: https://v3.canjs.com/doc/api.html
For example can-route: 3.2.4
But in releases in NPM and in Git tags I can see can-route: 3.3.4 and... there is different API for can-route some warnings about route.ready at least and suggestion to use start.
Is this page outdated ?
Julian
@pYr0x
May 14 2018 12:12
if you are using canjs 3
you should fix your versions to those are in the offical release
they are tested and work together
Julian
@pYr0x
May 14 2018 12:49
@justinbmeyer i read your docs about the new rest API. very good written! i wish the other docs e.g. component and route will be that detailed as the rest API. i think the small examples and the explanation are very good. while reading the docs, I noticed some small errors. should I mark them or do you read the docs again?
Justin Meyer
@justinbmeyer
May 14 2018 13:16
Mark them
I did document component, is something missing?
I’m not sure we want too much detail, just the stuff folks use 90% of the time
Julian
@pYr0x
May 14 2018 13:24
yeah i think it is good
Julian
@pYr0x
May 14 2018 13:34
i said: i wish the other docs e.g. component and route will be that detailed as the rest API
i "wish"
working with listenTo
Dovid Bleier
@dbleier
May 14 2018 17:25
@justinbmeyer > Could field, operation, etc be passed together to criterion? @dbleier
do you mean pushing it all into 1 prop on criterion and then in, say, the setter of that master prop pushing each object property to it's proper DefineMap prop?
or just have 1 prop, criterion, in the sub-component and deference to it's member properties in the stache?
Ranjan Subbiah
@ranjanbuilds
May 14 2018 18:55

hey, is there a way to pass properties to the light-dom (content tag)? i.e.

<div class="slideTrack"> {{#each ./slides}} <content slides:from="./slides" /> {{/each}} </div>

Chasen Le Hara
@chasenlehara
May 14 2018 19:19
@Lighttree Thanks for pointing out that the docs were out of date (the dropdown in the upper left of the page shows the version number).
I’m publishing the latest v3 docs so that page will be updated. You can also find the package version numbers here: https://github.com/canjs/canjs/blob/3.x-legacy/package.json
Chasen Le Hara
@chasenlehara
May 14 2018 19:35
@ranjanbuilds There isn’t, but I think can-slot/can-template would be a good fit for what you’re doing. Quick example: https://jsbin.com/feqoleguhu/1/edit?html,js,output
Chasen Le Hara
@chasenlehara
May 14 2018 19:42
@dbleier I think what Justin’s suggesting is something like:
{{#each(criteria)}}
    <el-criterion criterion:from="this" />
{{/each}}
So you don’t have to pass individual props to the component.
Unless you don’t want to build the component that way? Then I think your first solution (pass each prop individually) is best until we have something from canjs/can-stache#505
Dovid Bleier
@dbleier
May 14 2018 19:43
@chasenlehara so I get that. And this is better then individually binding all 3, correct?
and then in stache to just
<input value:bind="criterion.value" />
it wouldn't make sense to
Chasen Le Hara
@chasenlehara
May 14 2018 19:46
If “better” means “slightly less expensive” because you’re setting up 1 component binding vs. 3, then yeah I think so
Dovid Bleier
@dbleier
May 14 2018 19:46
criterion: {
    set(newval) {
       this.field = newval.field;
       this.operation = newval.operation;
       this.value = newval.value;
       return newval;
}
}
Chasen Le Hara
@chasenlehara
May 14 2018 19:48
In most instances I wouldn’t copy values from an object like that just to make them available in your view-model, unless it’s because you need to edit those values (and then save them back to the original object later)
Dovid Bleier
@dbleier
May 14 2018 19:51
I am editing the values and then binding back to the parent component, but using criterion.field should work just as well I would think
just exploring the options for the best solution :)
Chasen Le Hara
@chasenlehara
May 14 2018 19:55
Yeah, there’s a few ways you could do it… might make sense for you to pass the original object to the component, let it make a copy that can be edited and then saved at a specific time (instead of modifying it as the user edits the form).
Or if it makes more sense for the parent to do the saving, then making the copy in the parent and just passing that to the child…
Dovid Bleier
@dbleier
May 14 2018 19:58
I don't think it needs a copy, I am fine if it updates the parent's list of criteria as user is updating. Once he is done, a button is pushed on parent to send the list of criteria to server for a data query
unless there is a compelling reason to make a copy?
Chasen Le Hara
@chasenlehara
May 14 2018 20:00
Nope, sounds like you don’t for your use case.
I brought it up because I know in some apps, you might fetch something from the server and let the user edit it, but if they want to cancel their changes or otherwise not save to the server, you might want them to be editing a copy instead of the original objects (so their changes don’t show up in other parts of the app).
Dovid Bleier
@dbleier
May 14 2018 20:02
ah, got it, thanks
another question, using can-connect - I already have wired up my getList()-url.getListData:... api point
is there a way to add a custom url and call method?
or I just need to use the same getList(), passing it the query data and handle it on the server side?
Chasen Le Hara
@chasenlehara
May 14 2018 20:09
Hm, what’s special about the custom url / call method?
You might just want to create a new connection to a different URL—you can reuse the same Map and List types if they return data that works the same as something from another URL.
Ranjan Subbiah
@ranjanbuilds
May 14 2018 20:15
@chasenlehara thanks, will try it out
Justin Meyer
@justinbmeyer
May 14 2018 20:17

@dbleier what I mean is that sometimes I'll create sub-objects like:

Paginate = DefineMap.extend({
  limit: "number", count: "number", offset: "number"
});

Component.extend({
  tag: "my-parent",
  ViewModel: {
    paginate: Paginate
  }
});

and pass stuff like:

<my-child paginate:from="paginate"/>
Dovid Bleier
@dbleier
May 14 2018 20:18
ok, thanks
Justin Meyer
@justinbmeyer
May 14 2018 20:19
@ranjanbuilds you could turn on leakScope
but using <can-slot> is better
Dovid Bleier
@dbleier
May 14 2018 21:04
@chasenlehara nothing special. Are you saying create a new connection object and then wire that up to my Map? But then I would lose the 1st connection object, no?
or how would I choose when to use which connection?
Chasen Le Hara
@chasenlehara
May 14 2018 21:24
Yeah, you can create new types by calling extend and modifying those, e.g. Base = DefineMap.extend({}), … NewType = Base.extend({})
Or it might make more sense to implement getData and then just change the URL or whatever based on the params passed to it. That’s probably the simpler option, depending on what you need.
Dovid Bleier
@dbleier
May 14 2018 21:36
ok, thanks