These are chat archives for canjs/canjs

28th
Apr 2016
Justin Meyer
@justinbmeyer
Apr 28 2016 01:42
SparshithNRai
@SparshithNR
Apr 28 2016 05:45
I was working on sort. Where I wanted sort to happen on a can.List by passing my own comparator function. But I found that new can.js update has checking for arguments.length and setting comparator for it. Which is causing a huge performance issue by executing for every change in my list. I want sort to happen only once. I couldnt find a way to do it. Please help me out on this. Currently I used a work around by calling sort on list and then removing comparator once I get list sorted. jsbin for more reference http://jsbin.com/gijexo/2/edit?html,output
Marshall Thompson
@marshallswain
Apr 28 2016 15:19
Is there a way to do dynamic defaults for registering a route? I want to show a different default home page based on if the user is authenticated. So without auth, the default home page will show, but with auth the main app will show and the homepage will be available at /home.
Justin Meyer
@justinbmeyer
Apr 28 2016 15:34
@marshallswain do you want to change the url?
or just show something different?
in general, I think it's best to not change the url
and show the login screen if you know what I mean
Marshall Thompson
@marshallswain
Apr 28 2016 15:35
Same URL, show something different.
Justin Meyer
@justinbmeyer
Apr 28 2016 15:35
Yeah, so in that case it's pretty straightforward
take bitballs: and `can-
whoops
that function determines the page
If I wanted to show something different if the user was not logged in
I could just do
if( this.attr("session") ) {
  // rules for a logged in user
} else {
  // rules for someone not logged in
}
I was actually thinking about adding this because a non-logged in user shouldn't be able to see the page === "users"
                } else if(page === "tournaments") {
                    return {
                        title: "Tournaments",
                        componentName: "tournament-list",
                        attributes: "{is-admin}='./isAdmin'",
                        moduleName: "tournament/list/"
                    };

                } else if(page === "users") {
                    return {
                        title: "Users List",
                        componentName: "user-list",
                        attributes: "{session}='./session'",
                        moduleName: "user/list/"
                    };

                } else if(page === "register" || page === "account") {
                    return {
                        title: "Account",
                        componentName: "user-details",
                        attributes: "{(session)}='./session'",
                        moduleName: "user/details/"
                    };

                } else if(page === "players"){
Marshall Thompson
@marshallswain
Apr 28 2016 15:37
That's kind of the approach I have in place, but I switched it to a setter for some reason. I'll try going back.
Justin Meyer
@justinbmeyer
Apr 28 2016 15:37
Within the } else if(page === "users") {
I could do that branching
Marshall Thompson
@marshallswain
Apr 28 2016 15:45
@justinbmeyer Thanks. That helped me get it worked out.
Thomas Sieverding
@Bajix
Apr 28 2016 15:51
How do you observe a promises state?
Christopher Oliphant
@RALifeCoach
Apr 28 2016 17:34
I am trying to use two way binding. I have a component that has a sub-component. The sub-component may change the value of an attribute being passed from the main component.
I want the main component to detect that the sub-component changed the value of the attribute.
in my main component I pass the attribute: {(mainAttr)}=“maintain”
Matthew Phillips
@matthewp
Apr 28 2016 17:36
@RALifeCoach is this what you mean? https://canjs.com/docs/can.events.attributes.html
Christopher Oliphant
@RALifeCoach
Apr 28 2016 17:36
in my sub-component I have: this.attr(‘mainAttr’, newValue);
Thomas Sieverding
@Bajix
Apr 28 2016 17:36
You’d need to do that on the sub-component
Mohamed Cherif Bouchelaghem
@cherifGsoul
Apr 28 2016 17:37
<parent-component>
<sub-component {^prop-on-parent}="value"></sub-component>
</paren-component>
Thomas Sieverding
@Bajix
Apr 28 2016 17:38
He should probably use 2-way bindings, so <sub-component {(parent-prop)}=“parentProp”></sub-component>
Mohamed Cherif Bouchelaghem
@cherifGsoul
Apr 28 2016 17:38
em yes
Christopher Oliphant
@RALifeCoach
Apr 28 2016 17:38
@Bajix That’s what I am using {(maintain)}=“maintain”
Mohamed Cherif Bouchelaghem
@cherifGsoul
Apr 28 2016 17:39
matthew gives the right docs page to look in
Christopher Oliphant
@RALifeCoach
Apr 28 2016 17:54
hmmm, I am still not getting it. In my sub-component I have: this.element.attr('hasFavourites', true);
The attribute hasFavourites is defined as: {(has-favourites)}=“hasFavourites”
in the main component I have:
            'attributes': function (element, event) {
                if (event.attributeName === 'hasFavourites') {
                    this.viewModel.attr('hasFavourites', value);
                }
            }
I set a break point on this.viewModel and it doesn’t fire
Christopher Oliphant
@RALifeCoach
Apr 28 2016 18:13
Any ideas?
http://jsbin.com/qahepi/38/edit?html,js,console,output
This jsbin is the closest I can get - but still not there
Guido Smeets
@gsmeets
Apr 28 2016 18:26
Shouldn't you use {{}} binding instead?
Christopher Oliphant
@RALifeCoach
Apr 28 2016 18:26
I don’t know - I was hoping someone here would know
Guido Smeets
@gsmeets
Apr 28 2016 18:26
And use '{viewModel} hasFavourites' as event
Christopher Oliphant
@RALifeCoach
Apr 28 2016 18:28
’{viewModel} hasFavourites’ isn’t working - have a look at my jsbin
dylanrtt
@dylanrtt
Apr 28 2016 18:41
@RALifeCoach Is there a specific reason you are using the events object? Using just ($click) and the view models would be more straight forward for what it looks like you are trying to do.
Christopher Oliphant
@RALifeCoach
Apr 28 2016 18:50
my goal is to have main component know and respond to an event at the sub-component level
I am open to any way that will work
Kevin Phillips
@phillipskevin
Apr 28 2016 18:50
what is the event?
is it a click like the example?
Christopher Oliphant
@RALifeCoach
Apr 28 2016 18:50
there is an icon that is getting clicked
I have an event on the sub component that captures the click
I want to communicate the click up a level
Christopher Oliphant
@RALifeCoach
Apr 28 2016 18:56
@pYr0x The only change I see is that you removed the {} from around xxx when defining main
is that correct?
Julian
@pYr0x
Apr 28 2016 18:57
i made ´xxx="xxx"`
you want to pass a value
Christopher Oliphant
@RALifeCoach
Apr 28 2016 18:57
okay - thanks
Julian
@pYr0x
Apr 28 2016 18:57
dont know what {xxx}does
but....
remember
Christopher Oliphant
@RALifeCoach
Apr 28 2016 18:58
I thought it provided one way binding
Julian
@pYr0x
Apr 28 2016 18:58
your way is not the correct way
it is better to prevent the event object
you have the viewModel and can define getter and setter with the define plugin
the event object should be used for "inserted"
but not for that way you want
Kevin Phillips
@phillipskevin
Apr 28 2016 19:00
or for event delegation… if there are hundreds of these items that could be clicked
Julian
@pYr0x
Apr 28 2016 19:00
yep
Christopher Oliphant
@RALifeCoach
Apr 28 2016 19:00
okay - I have to run - I will ponder your words
Justin Meyer
@justinbmeyer
Apr 28 2016 19:13
@/all Building some sudo code out for a CanJS 3.0 TodoMVC. Please check it out: https://github.com/tastejs/todomvc/blob/gh-pages/examples/canjs/js/components/todo-app.js
templates are next to that file
wrong thing
that's the right one