These are chat archives for canjs/canjs

7th
Aug 2016
Christopher Oliphant
@RALifeCoach
Aug 07 2016 02:10
I have been working with routes.
On my home page there is a drop down that sets the slug and stays on the same page.
Here is the code.
        ".non-person click": function ($element) {
            var user = $element.attr('data-user');
            can.route.attr({
                page: 'home',
                slug: user
            });
            this.viewModel.attr('user', user);
        }
The first time I click the drop down and select a person, the page and slug are set. If I then do nothing but select another person, the window.location.hash is cleared (I lose both page and slug). If I select another person, then the page and slug are set.
What am I doing wrong?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 12:45
hi
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:10
@cherifGsoul Hello
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:11
hi @RALifeCoach
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:11
Any suggestions for my code?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:11
Ah sorry let me see for a min
can you share your routing configuration
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:12
One change from the above, I now only set the slug
sure
    var AppState = can.Map.extend({});

    var appState = new AppState();

    // Bind the application state to the root of the application
    $('#can-main').html(can.view('main.stache', appState));

    // Set up the routes
    can.route(':page', {page: 'home'});
    can.route(':page/:slug', {slug: null});

    $('body').on('click', 'a[href="javascript://"]', function (ev) {
        ev.preventDefault();
    });

    // Bind the application state to the can.route
    can.route.map(appState);

    can.route.ready();
pretty much an exact copy from the documentation
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:16
even if you change the appState it changes nothing?
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:17
I only change appState via can.route
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:17
try to change the route via the state :)
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:17
It works and doesn’t work - it keeps alternating between setting the page and slug and clearing them
How would I do that?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:18
instead of
can.route.attr({
                page: 'home',
                slug: user
            });
appState.attr({page:'home',slug:'user'});
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:20
appState isn’t defined in the module that is doing the routing
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:20
emm your app global state isnt shared between application components (modules)
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:21
only via can.route
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:21
$('#can-main').html(can.view('main.stache', appState));
if so can you tell me what you have in this main.stache template rendering?
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:22
<div class="col-md-2"></div>
<div class="col-xs-12 col-md-8">
    <otw-header {(page}}="page"></otw-header>

    {{#eq page "home"}}
        <otw-home></otw-home>
    {{/eq}}

    {{#eq page "goals"}}
        <otw-goals></otw-goals>
    {{/eq}}

    {{#eq page "record"}}
        <otw-record></otw-record>
    {{/eq}}
</div>
<div class="col-md-2"></div>
That’s my main.stache, the selector is part of otw-home
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:22
so the appState is shared :)
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:23
how do I retrieve it in the module?
this.viewModel.appState?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:23
for url there's a helper
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:23
What’s the helper called?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:24
<a href="{{routeUrl page='home' slug='yourslug'}} ">
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:24
But I don’t want it to be done in stache. I want it done in code. The code does other things.
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:24
I know
for url changes do it in template with the helper
decouple it from your code
if it changes you have the attr in the code like you did
can you see the gist link in the header of this discussion page?
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:28
I’m not sure what you mean by the gist link. I see the page and I see it working.
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:29
it uses the routeUrl helper
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:30
I changed each of the drop down items to call routeUrl and it is now setting the slug correctly. However, it isn’t running the code.
Probably due to
$('body').on('click', 'a[href="javascript://"]', function (ev) {
        ev.preventDefault();
    });
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:31
where you put the code:
 ".non-person click": function ($element) {
            var user = $element.attr('data-user');
            can.route.attr({
                page: 'home',
                slug: user
            });
            this.viewModel.attr('user', user);
        }
in a component or control?
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:32

That code is now

        ".non-person click": function ($element) {
            var user = $element.attr('data-user');
            this.viewModel.attr('user', user);
        }

and it’s in a component

the viewModel.user isn’t being set
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:33
$element.viewModel.attr('user',user);
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:35
No, that didn’t fix it.
I changed it back and now it’s working
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:35
all works now?
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:36
yes - thank-you
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:36
ok weired you said that the viewModel.user isnt set
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:36
BTW I tried using superModel and gave up after 4 days of frustration.
I have found that the CanJS code sometimes works and then it sometimes stops working. Then I make some change, unrelated, and it starts working again
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:37
I think is better to start it in small experimental projects
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:37
I can reproduce it, but I have noticed it more than once
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:37
not production projects
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:37
This one is small
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:38
use donejs :)
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:38
My grandson needs me - thaks for your help
I did use doings -
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:38
ok welcome
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:43
I did use doneJS - and I had Bajix allow me access to his code and I still couldn’t get it to work.
I am now making my own ajax calls
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:44
can.Model dosent help?
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:44
after 4 days of frustration - no
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:44
:/
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:45
I tried Model, connect, superModel
I could get close, I could see the data being read from the API, but then it wouldn’t make it’s way into the viewModel
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:46
can you write the difficulties you have faced in the forum so we can see how we make things better?
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:47
I will try to re-create my problem
and then I can post it
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:48
yes
thank you
Christopher Oliphant
@RALifeCoach
Aug 07 2016 15:48
I told Bajix that if I ever managed to get it to work I would write a blog explaining the steps.
The pieces have to fit together exactly as you guys imagined it. If I don’t exactly reproduce it then it doesn’t work.
But I will see about re-creating the issue.
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 07 2016 15:50
ok thanks