These are chat archives for canjs/canjs

18th
Mar 2016
Thomas Sieverding
@Bajix
Mar 18 2016 01:32
Can can-import set a value on root?
Julian
@pYr0x
Mar 18 2016 08:33
%root.attr?
Viktor Busko
@Lighttree
Mar 18 2016 10:19
When I change route clicking on such link <a href="{{routeUrl page='participants'}}">Next</a> in some reason Can changes URL 2 times in a row: at first #!&page=participants and after that #!participants. It does it very fast, still I can sight this. But the main issue that if I'll click browser's back button, I go to #!&page=participants and only on 2nd click to #!. If I manually change url in browser it works perfectly, so it seems that the issue with {{routeUrl}}. Maybe someone had such issue ?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 10:22
@Lighttree how you do can.route.ready()?
Viktor Busko
@Lighttree
Mar 18 2016 10:22
Oh fixed this by adding
{{^routeCurrent page='restaurants'}}
        href="{{routeUrl page='restaurants'}}"
    {{/routeCurrent}}
still not sure why it helped :D
@cherifGsoul
$(function () {
  // Global application state.
  var AppState = can.Map.extend({});
  // It is acctually main ViewModel
  var appState = new AppState();

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

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

  // Bind the application state to the can.route
  can.route.map(appState);
  can.route.ready();
});
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 10:25
seems you are on child component and the routeCurrent is in the parent component
Viktor Busko
@Lighttree
Mar 18 2016 10:30
Yep
Christopher Oliphant
@RALifeCoach
Mar 18 2016 13:09
I am finding the documentation somewhat frustrating
I try things in the documents, and it does not work as I read in the documents
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 13:10
@RALifeCoach can you precise parts that make you feel this?
Christopher Oliphant
@RALifeCoach
Mar 18 2016 13:10
I wrote an event on a component, the event was “inserted"
In the event I am trying to access a property on the viewModel
in the documentation is says:
this.viewModel.page() (where page is a function on the viewModel)
But I want to access a property (nowhere can I find a sample of this), so I figure this.viewModel.propertyName
undefined
Sorry, I am frustrated
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 13:12
this.viewModel.attr('propertyName')
Christopher Oliphant
@RALifeCoach
Mar 18 2016 13:13
But my frustration shouldn’t lead to sarcasm
I tried that too
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 13:13
viewModel is an instance of can.Map
Christopher Oliphant
@RALifeCoach
Mar 18 2016 13:13
Yes
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 13:13
is dosent work?
Christopher Oliphant
@RALifeCoach
Mar 18 2016 13:14
And in the debugger I can open viewModel and see _data and further down see my property names
no it returns undefined
The property is a can.List
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 13:14
how you set the property?
Christopher Oliphant
@RALifeCoach
Mar 18 2016 13:14
when instantiating the map
I create a variable = can.Map({ some properties})
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 13:15
ok is it array?
Christopher Oliphant
@RALifeCoach
Mar 18 2016 13:15
then I instantiate with new mapVariable({ more properties })
yes it is an array
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 13:16
a jsbin? :)
Christopher Oliphant
@RALifeCoach
Mar 18 2016 13:16
unfortunately no
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 13:16
you can not make one ? :)
Christopher Oliphant
@RALifeCoach
Mar 18 2016 13:16
I can create one, I guess - it just takes a while to get it all setup
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 13:17
ok
Christopher Oliphant
@RALifeCoach
Mar 18 2016 13:18
give me 5 and I will have it for you
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 13:18
Ok Im here @RALifeCoach :)
Christopher Oliphant
@RALifeCoach
Mar 18 2016 13:25
Can you give a quick assist on jibs, please?
I can’t even get it to run
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 13:25
Im taking a look
Christopher Oliphant
@RALifeCoach
Mar 18 2016 13:29
do you see what I see? (I am not familiar with jsbins)
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 13:29
yes
errors
I will try to fix it
Christopher Oliphant
@RALifeCoach
Mar 18 2016 13:31
will I see your changes?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 13:31
yes I will clone it
here is my clone
Christopher Oliphant
@RALifeCoach
Mar 18 2016 13:32
But in jsbin I do not see your changes automatically reflected in my code, if you don’t clone it?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 13:32
Im on it @RALifeCoach
I cloned it
you compare later
:)
Christopher Oliphant
@RALifeCoach
Mar 18 2016 13:33
okay - just trying to understand the tools
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 13:33
no problem :)
Christopher Oliphant
@RALifeCoach
Mar 18 2016 13:37
any ideas on what is wrong? I am not trying anything complicated
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 13:37
Im looking
your bin has not jquery :)
@RALifeCoach and I put the scripts before closing body tag
can you see the changes?
but videos still undefinde
Christopher Oliphant
@RALifeCoach
Mar 18 2016 13:41
yes - I can watch as you make changes - very slick
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 13:41
yes
@RALifeCoach I passed the viewModel to component viewModel
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 13:46
tell me if it dosent what you need to achieve
videos was returning undefindebecause is in %root scope not the component video-control scope
does this make sens @RALifeCoach ?
Christopher Oliphant
@RALifeCoach
Mar 18 2016 13:49
I am looking but I dont’ see [] on the console output
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 13:49
can.Map convert arrays to can.List
Christopher Oliphant
@RALifeCoach
Mar 18 2016 13:50
A couple of questions, how do I get the array length? just attr(‘ccc’).length
yes - I see that that worked
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 13:50
yes
Christopher Oliphant
@RALifeCoach
Mar 18 2016 13:51
The more important question - how do I change the values in the viewModel?
from outside the component?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 13:51
in the template?
or js?
Christopher Oliphant
@RALifeCoach
Mar 18 2016 13:51
in js
in this case, I want to start adding players
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 13:52
$('el').viewModel().attr('prop',value)
Christopher Oliphant
@RALifeCoach
Mar 18 2016 13:52
or set someProperty
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 13:53
in case you are not using jquery use can.$('el').viewModel().attr('prop',value)
Christopher Oliphant
@RALifeCoach
Mar 18 2016 13:54
hmm, I made the change on the jsbin, but it isn’t working
sorry - my error
no - still not what I was expecting
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 14:02
sorry @RALifeCoach it was lunch time, Im back
Christopher Oliphant
@RALifeCoach
Mar 18 2016 14:03
@cherifGsoul Here is what I am trying - but the array length is still 0
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 14:03
ok
pass the videosas attributes in the component tag :)
Christopher Oliphant
@RALifeCoach
Mar 18 2016 14:06
that answers my second question (I one I hadn’t asked yet), but how do I add videos?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 14:07
can you give more infos about the use-case?
Christopher Oliphant
@RALifeCoach
Mar 18 2016 14:08
I am displaying data on the front end based on json files I receive from the back-end.
From time to time, new videos will become available
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 14:08
yes
Christopher Oliphant
@RALifeCoach
Mar 18 2016 14:08
I don’t want to have to destroy and recreate the control
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 14:08
do you have a model for videos?
no no
everthing is bounded with the template
you should have a model connect to your server services
Christopher Oliphant
@RALifeCoach
Mar 18 2016 14:09
just an array of objects with properties such as videoId, thumbnail image url, title, etc
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 14:09
yes
Christopher Oliphant
@RALifeCoach
Mar 18 2016 14:10
I do not understand the comment, "you should have a model connect to your server services"
I think I understand - I should define a model for the videos with information on how to access the server
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 14:13
yes
Christopher Oliphant
@RALifeCoach
Mar 18 2016 14:13
the model would update the map
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 14:13
yes
Christopher Oliphant
@RALifeCoach
Mar 18 2016 14:14
next use chase - the user wants to change the category of videos
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 14:15
you see the example of todolist
Christopher Oliphant
@RALifeCoach
Mar 18 2016 14:15
that would result in a change to the url being requested
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 14:15
it connects to a server fetches and displays the todos
and the route change when filter changes
Christopher Oliphant
@RALifeCoach
Mar 18 2016 14:15
yes - I see the todo list (which, BTW, has 7 errors)
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 14:16
are warnings for the missing ;
still works :)
can.fixture can simulate server service
Christopher Oliphant
@RALifeCoach
Mar 18 2016 14:18
can.fixture is nice
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 14:18
yes canjs have to tools to get things done :)
@RALifeCoach by the way check this https://donejs.com
for most of time data are changed in the stachetemplates via live-binding
Christopher Oliphant
@RALifeCoach
Mar 18 2016 14:19
I am trying to add a bit of CanJS to a legacy system
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 14:19
Ok that's nice
think of templates as a way to reduce manipulating DOM manualy
Christopher Oliphant
@RALifeCoach
Mar 18 2016 14:20
once I have the general model in place, then as dev’s work on the legacy code, they can start slowly converting over from the variety of approaches currently in the code to CanJS
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 14:21
@RALifeCoach would be nice to write about your experience and shared with us if you can :)
Christopher Oliphant
@RALifeCoach
Mar 18 2016 14:21
You have been very helpful, but the use case of changing category happens outside of the CanJS scope
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 14:22
:/
Christopher Oliphant
@RALifeCoach
Mar 18 2016 14:22
That means I still need a way to change the values inside the control from outside
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 14:23
if you use can.componentit's easy to use templating
templates can be inline (mixed with the html)
Christopher Oliphant
@RALifeCoach
Mar 18 2016 14:24
what I have working is to just use can.Component with a can.Map that I change outside of the component
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 14:24
<script type="text/stache" id="mycomponent-tpl">
{{your-stache
}}
</script>
Christopher Oliphant
@RALifeCoach
Mar 18 2016 14:24
yes - that much I have working
this morning I was trying to bring more code under the canjs unbrella
in the code I have working I created a can.Construct that handled the events on behalf of the template and map
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 14:26
ok
can.Construct is used often as base for other modules
Christopher Oliphant
@RALifeCoach
Mar 18 2016 14:29
As a result of this conversation, I gather that I have gone as far as I can go, because I cannot impact the viewModel within the Component from outside of the Component
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 14:30
you can change viewModel outside the component scope
as I told you $('el').viewModel()
@RALifeCoach did I answer all your questions?
Christopher Oliphant
@RALifeCoach
Mar 18 2016 15:19
@cherifGsoul yes - you have
Thank-you very much
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 15:20
You are welcome, we CanJs here :)
Christopher Oliphant
@RALifeCoach
Mar 18 2016 15:33
This message was deleted
A quick question, I hope. How do I get events to call a function?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 15:36
function in events object?
yes
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 15:37
This message was deleted
Christopher Oliphant
@RALifeCoach
Mar 18 2016 15:38
My bad - ignore me
I added the function to outside of the events object
wrong scope
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 18 2016 15:38
Ok