These are chat archives for canjs/canjs

28th
Jul 2016
Gregg Roemhildt
@roemhildtg
Jul 28 2016 00:10
I don't think the ID could change, however, I just looked into the network responses and it looks like the rest server is returning 204 No Content on PATCH requests. could this cause an issue with can-connect?
Thomas Sieverding
@Bajix
Jul 28 2016 00:22
Is there any way to get can-set rangeInclusive to work without props being defined on the map?
The issue I’m running into is that the range is used to create a query, but there’s no way to determine w/ the data given if a given map is within the range, hence resulting in a behavior in which I can save docs, redirect back to my listing, and it’ll ignore the results of the API query, instead returning the original list w/out my new doc
It seems awfully like bahavior that won’t ever properly work unless it can deterministically read a doc, compare properties on the doc, and match it to the range w/ said props
Thomas Sieverding
@Bajix
Jul 28 2016 00:29
Essentially meaning I’d need docs w/ known indexes against a set, which doesn’t seem viable
can-connect pagination is all kinds of tricky
Jeremy Miller
@jjm340
Jul 28 2016 05:24
How would I have an event fire after the stache renders the contents of a list in the template?
I tried the normal list change event but it fires before the template gets rendered
Thomas Sieverding
@Bajix
Jul 28 2016 07:02
@jjm340 You’d use inserted events
<div ($inserted)=“allThatJazz(el=%element i=%index scope=.)”></div>
Thomas Sieverding
@Bajix
Jul 28 2016 10:14
@minsooshin can.ajax === $.ajax
Andrei Balmus
@abalmush
Jul 28 2016 11:37
hi guys How can I set a context for partials in stache template if I set it like so:
{{#selectOptions}} {{>selectElement}} {{/selectOptions}}
it iterate over selectOptions and creates multiple select elements
Kevin Phillips
@phillipskevin
Jul 28 2016 11:39
@abalmush did you try {{#with selectOptions}} {{>selectElement}} {{/with}}?
Andrei Balmus
@abalmush
Jul 28 2016 11:39
Hi @phillipskevin! nop, let me try this
Thomas Sieverding
@Bajix
Jul 28 2016 11:40
Components > partials
Just saying
Kevin Phillips
@phillipskevin
Jul 28 2016 11:41
totally agree
Guido Smeets
@gsmeets
Jul 28 2016 11:44
and when it comes to a select list, which seems to be the case here
wrap it into just 1 component
if you want to keep some sense of performance
Andrei Balmus
@abalmush
Jul 28 2016 11:46
@phillipskevin thank you a lot! I missed this in documentation :( sorry
Kevin Phillips
@phillipskevin
Jul 28 2016 11:47
no worries
Andrei Balmus
@abalmush
Jul 28 2016 11:53
@phillipskevin is it ok if I iterate inside {{#with slectOptions}} like so: {{#each .}} it should work right?
Kevin Phillips
@phillipskevin
Jul 28 2016 11:53
I think it should. I haven’t tried it.
Thomas Sieverding
@Bajix
Jul 28 2016 11:54
That sounds like a use case for a component ;o
Do not fear the component
Love the component
Andrei Balmus
@abalmush
Jul 28 2016 11:54
I have some issues it shows me the error inside helper outside the {{#with ..
but I’ll try to figureout tahnk you again
Thomas Sieverding
@Bajix
Jul 28 2016 11:55
Just so happens your issue is immediately fixed if you wrap your template in a tag
Andrei Balmus
@abalmush
Jul 28 2016 11:56
@gsmeets My porblem that selectList can be different
I maen selectList, or SettingsList or other
Guido Smeets
@gsmeets
Jul 28 2016 11:56
yeah, I know what you mean, I made a templated select list as well
but I'm using an undocumented feature that shouldn't be working, so that's a bit meh
Andrei Balmus
@abalmush
Jul 28 2016 11:57
could you please show me an example?
Guido Smeets
@gsmeets
Jul 28 2016 12:00
it's kinda propietary code I'm afraid, not sure if my employer minds if I link our core components ;)
Andrei Balmus
@abalmush
Jul 28 2016 12:00
oh I undertsand
ok thank you for you help guys
btw @Bajix I’m importing templates as a string so it will be bundled with all javascript, so tags are not good for me
Guido Smeets
@gsmeets
Jul 28 2016 12:00
but if I get you, you have a list of items that you want to select, and then you want to render a template per item, right?
Andrei Balmus
@abalmush
Jul 28 2016 12:01
yes
<select {($value)}="selectedAddressId" class="select-address">
            {{#each .}}
                <option value="{{addressId}}">
                    {{#addressName}}
                        {{.}}
                    {{/addressName}}

                    {{^addressName}}
                        {{#line1}}
                            {{.}}
                        {{/line1}}
                    {{/addressName}}
                </option>
            {{/each}}
        </select>
this is my {{>selectElement}}
Guido Smeets
@gsmeets
Jul 28 2016 12:01
ah, like that you mean
Andrei Balmus
@abalmush
Jul 28 2016 12:02
yes it should work like that right?
Guido Smeets
@gsmeets
Jul 28 2016 12:02

you can create a component:

<my-select>
<!--- your item template here -->
</my-select>

Andrei Balmus
@abalmush
Jul 28 2016 12:03
yes sounds like a plan
I will create new component for that
Guido Smeets
@gsmeets
Jul 28 2016 12:03
and your my-select component would have this template:
<select {($value)}="selectedAddressId" class="select-address">
            {{#each .}}
                <option value="{{addressId}}">
                    <content />
            {{/each}}
        </select>
but beware, that's the undocumented feature
Andrei Balmus
@abalmush
Jul 28 2016 12:03
ok understood
Guido Smeets
@gsmeets
Jul 28 2016 12:03
that content tag will be replace with the template you pass into your my-select component for each item
officially it cannot do that
so come 3.0 or later you might run into it not working anymore
Andrei Balmus
@abalmush
Jul 28 2016 12:04
oh thats nice feature :) I’ll try it
Guido Smeets
@gsmeets
Jul 28 2016 12:04
see: canjs/canjs#2429 for more info
Andrei Balmus
@abalmush
Jul 28 2016 12:04
thanks @gsmeets
Guido Smeets
@gsmeets
Jul 28 2016 12:04
yw
Kevin Phillips
@phillipskevin
Jul 28 2016 13:50
anyone have advice on how to make two values that both depend on each other work using setters?
here’s a working example of what it is supposed to do: http://jsbin.com/xukilijoca/edit?js,output
but I would like to be able to do it just with setters
Kevin Phillips
@phillipskevin
Jul 28 2016 15:36
nevermind, I got it working
Gregg Roemhildt
@roemhildtg
Jul 28 2016 16:05
I'm curious, how did you get it working? I've tried to do something similar and ended up using getters
Kevin Phillips
@phillipskevin
Jul 28 2016 16:06
yeah, I ended up not using setters or getters
it’s basically using setters, but not as set properties in the define plugin
i’ll make an updated jsbin
Gregg Roemhildt
@roemhildtg
Jul 28 2016 16:18
Ah okay. That works well
Kevin Phillips
@phillipskevin
Jul 28 2016 16:23
yeah, makes the binding more complicated, but otherwise it’s nice
Jeremy Miller
@jjm340
Jul 28 2016 17:26
So is there a way to fire a function off after an {{#each}} helper has rendered ALL of it's contents?
Thomas Sieverding
@Bajix
Jul 28 2016 17:51
@phillipskevin you can totally do that via get+set
@jjm340 ($inserted) all the way
You can also bind to changes in the list length and do code that runs in the next animation frame
Jeremy Miller
@jjm340
Jul 28 2016 17:52
($inserted) will get called each time a new item from the {{#each}} binding gets inserted
Thomas Sieverding
@Bajix
Jul 28 2016 17:52
Or batch for that matter
{foo} length -> can.batch.afterPreviousEvents maybe
Jeremy Miller
@jjm340
Jul 28 2016 17:53
What I want is for it to get called once after everything has rendered in the {{#each}}
I tried doing it on a list change, but that happens before the {{#each}} renders anything
Thomas Sieverding
@Bajix
Jul 28 2016 17:53
Then do list length + RAF
requestAnimationFrame
Or a debounce
npm install ––save debounce
Kevin Phillips
@phillipskevin
Jul 28 2016 17:54
@Bajix how would you do it with get+set?
Thomas Sieverding
@Bajix
Jul 28 2016 17:57
var ViewModel = can.Map.extend({}, {
  define: {
    rate: {
      type: 'number',
      value: 0
    },
    distance: {
      type: 'number'
      value: 500
    },
    cost: {
      get: function() {
        var distance = this.attr('distance'),
          rate = this.attr('rate');

        return distance * rate;
      },
      set: function( cost ) {
        var rate = this.attr('rate');

        this.attr('distance', cost / rate);
      }
    }
  }
});
Kevin Phillips
@phillipskevin
Jul 28 2016 17:59
that’s the same as my original working jsbin, right?
Thomas Sieverding
@Bajix
Jul 28 2016 17:59
Your original example had a translater on cost and rate
Kevin Phillips
@phillipskevin
Jul 28 2016 18:00
here’s a working example of what it is supposed to do: http://jsbin.com/xukilijoca/edit?js,output
that one, I mean
Thomas Sieverding
@Bajix
Jul 28 2016 18:00
You don’t need to return the val on the setter as well
Kevin Phillips
@phillipskevin
Jul 28 2016 18:01
oh, I see the difference
the problem is that distance is not always set
and if you set cost prior to distance being set it won’t work
Kevin Phillips
@phillipskevin
Jul 28 2016 18:11
any other ideas @Bajix ?
Jeremy Miller
@jjm340
Jul 28 2016 20:07
If I want "private" members in my view model, should I declare them outside of the define object?
Hitesh Ubharani
@blackmamba
Jul 28 2016 22:45
Hello room
I'm dynamically loading a child component, with a callback reference which exists in the parent. The parent method when executed, tried to modify the parents' viewModel, but it is unable to due to lack of context of parent. How can this be achieved?
Hitesh Ubharani
@blackmamba
Jul 28 2016 22:51
Currently the only way I can think of is firing a custom event on the body from the child, and listening to that event handler of the parent. But I'm not happy with this
I'd prefer to make it work on viewModel property change
Would appreciate any help