These are chat archives for canjs/canjs

22nd
Jan 2016
Alex
@whitecolor
Jan 22 2016 00:03
@dbleier what do you mean updated? why would need to rebind the plugin?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jan 22 2016 00:16
@dbleier you can put your custom events in the events object for the component:
can.Component.extend({
tag:'x-el',
template:aTpl,
events:{
'li click':function(){
// handle it
}
}
});
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jan 22 2016 00:23
@dbleier can you give an example for your use case?
Jeroen Cornelissen
@jeroencornelissen
Jan 22 2016 07:51
How do can.Components cope with screenreaders? Do you guys take accessibility into account?
We are creating a new menu for our webapp and I want to make it accessible for all users.
Dovid Bleier
@dbleier
Jan 22 2016 10:18
@cherifGsoul, @whitecolor the custom events are usually user triggered events. I need to know when the template has finished updating itself. The use case is this: I have a div containing a series of divs. I bind a jquery plugin called cylce2 to the parent div which cycles through the children divs (containing img or video) in a slideshow. When the viewModel id is changed (via scheduling) it updates the template with all new content, including new content for that div, which then crashes cycle2. So when the viewModel id is updated, I want to remove the plugin (can-define) and once the content is done updating, reattach the plugin. I just don't know how to know when the template is finished updating. Basically I need an event like "inserted" called "updated". Make sense?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jan 22 2016 12:23
@dbleier why you need to disable define plugin?
Alex
@whitecolor
Jan 22 2016 12:37
@dbleier I'd better to create custom element something my-cycle2 which will handle erythinkng (jquery plugin lifecycle) within itself, when the id of doc is changed it can either handl this update inside or be replaced with new instance
{{#doc}}<my-cycle {doc}=doc/>{{/doc}}
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jan 22 2016 12:40
Im writing a jsbin example for better understanding
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jan 22 2016 13:42
@dbleier here is a basic example with cycle2 http://jsbin.com/qejilo/4/edit?html,css,js,output you can clone it and explain your problem
Adam Tourkow
@atourkow
Jan 22 2016 17:56
I have component I want to update via ajax based on a timer. Should, I just build a function into the component called updateStuff: function() { doAjaxStuff ... } and just call updateStuff()?
Mason Shin
@minsooshin
Jan 22 2016 18:08
I have a small question about model
what is recommended between callback and promise for success and error?
for instance, if I have a model with Todo
Todo.findAll({}, success, error) or Todo.findAll({}).then()?
Kevin Phillips
@phillipskevin
Jan 22 2016 18:45
@atourkow when you say a timer, you mean it’s going to do a setTimeout and update every few seconds or something?
Adam Tourkow
@atourkow
Jan 22 2016 18:48
@phillipskevin Yeah. But, I also would like to apply ajax to something like a search. FWIW, it's not a SPA app, but just a section of the page.
Kevin Phillips
@phillipskevin
Jan 22 2016 18:49
so, something like… every 5 seconds make an ajax call and update your viewModel based on the response?
Adam Tourkow
@atourkow
Jan 22 2016 18:55
@phillipskevin yep. The search and timer are separate things.
I think what's confusing me, is the fact that there's "can.model" which is for like REST api calls. Should I be putting the ajax calls in the model or in the ViewModel?
Kevin Phillips
@phillipskevin
Jan 22 2016 18:56
usually, the ViewModel would call the model
and the model would be responsible for the ajax stuff
Adam Tourkow
@atourkow
Jan 22 2016 18:58
So, like in the viewmodel is a function called updateStuff that calls the model?
Kevin Phillips
@phillipskevin
Jan 22 2016 19:00
the most basic way is to use the model to initialize your viewmodel
so you have a property on your viewModel that represents whatever data is returned by the Model
in that example, the players property ends up being a promise
Another nice way to do it is to have two separate properties - one for the promise and one for the data
so that uses the asynchronous getter to set game to be the data returned by Game.get
that’s nice because you can use the promise in your template, but also use the data
Adam Tourkow
@atourkow
Jan 22 2016 19:05
I get the init, but does that also include updating?
Kevin Phillips
@phillipskevin
Jan 22 2016 19:06
like:
{{#if gamePromise.isResolved}}
    {{#game.homeTeam.score}} - {{#game.awayTeam.score}}
{{/if}}
yes, if you use the get: function(last, set){ approach, it would update whenever gamePromise changes
that getter sets up binding so that if it changes, the template will update
if you use value it’s just setting the intitial value, so it won’t handle updates
Adam Tourkow
@atourkow
Jan 22 2016 19:08
So, you can just call viewModel.get() to refresh from ajax?
Kevin Phillips
@phillipskevin
Jan 22 2016 19:09
if your template uses game that will happen automatically
viewModel.attr(‘game’) calls that get()
but what you’ll need to do in your case is set up some way that gamePromise will return a new promise after some amount of time
I would try something like this:
define: {
  gamePromise: {
    get: function() {
      return this.getGamePromise();

      setTimeout(this.getGamePromise, 5000);
    }
  }
},
getGamePromise: function() {
  return Game.get({...})
}
hmm, that’s not going to work… because it won’t change the return value of gamePromise
let me try it in a JSBin
Adam Tourkow
@atourkow
Jan 22 2016 19:14
It seems like there's a lot of ways to do things in canJS.
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jan 22 2016 19:27
@atourkow you may look at can-connect it does cool stuffs around ajax
Adam Tourkow
@atourkow
Jan 22 2016 19:29
@cherifGsoul ok
Kevin Phillips
@phillipskevin
Jan 22 2016 19:31
define: {
  gamePromise: {
    get: function(val, set) {
     this.getGamePromise().then(set);

      setTimeout(function() {
        this.getGamePromise().then(set);
      }, 5000);
    }
  }
},
getGamePromise: function() {
  return Game.get({...})
}
I’m still going to put together a jsbin, but I think that should work
Kevin Phillips
@phillipskevin
Jan 22 2016 19:49
@atourkow that code above works if you only want to update once, so doesn’t solve your problem
here’s an example of updating the model every 1 second: http://jsbin.com/hamidalugi/edit?html,js,output
let me know if any of that doesn’t make sense
Adam Tourkow
@atourkow
Jan 22 2016 20:05
@phillipskevin Thanks!
Kevin Phillips
@phillipskevin
Jan 22 2016 20:06
no problem, hope it helped
Adam Tourkow
@atourkow
Jan 22 2016 20:06
We'll see. gotta try it first
Here's a stupid question: I don't have the whole page as a view, so what's the best way to just put in a component? After defining the component, just make new template = can.stache('<mycomponent/>'); $('#elIWantMyComponentIn').append(template());
Kevin Phillips
@phillipskevin
Jan 22 2016 20:12
you could also checkout can.autorender
Adam Tourkow
@atourkow
Jan 22 2016 20:13
ok
Kevin Phillips
@phillipskevin
Jan 22 2016 20:13
that way you could just put you stache script inside of #elIWantMyComponentIn and can would render it for you
Adam Tourkow
@atourkow
Jan 22 2016 20:15
oh, how interesting
Kevin Phillips
@phillipskevin
Jan 22 2016 20:17
but before that existed, we did it with basically the code you wrote
Adam Tourkow
@atourkow
Jan 22 2016 20:19
@phillipskevin are you a canJS Dev?
Kevin Phillips
@phillipskevin
Jan 22 2016 20:22
yeah, I’m a developer at Bitovi
so primarily do consulting with CanJS and our other tools
Adam Tourkow
@atourkow
Jan 22 2016 20:24
@phillipskevin nice. I wish the word would spread more about canJS. I keep looking at other technlogies, bt find I like the way CanJS works the best
Kevin Phillips
@phillipskevin
Jan 22 2016 20:25
Yeah, I hear you
we talk at a lot of meetups and conferences
Adam Tourkow
@atourkow
Jan 22 2016 20:25
where are you based?
Kevin Phillips
@phillipskevin
Jan 22 2016 20:25
if there’s a group in your area that you think it would be good for us to talk at, let us know
we work remotely, so we’re all over
Adam Tourkow
@atourkow
Jan 22 2016 20:26
I've stopped doing coding for money, this is for my personal site. But, I'll definitely promote.
I still talk to devs all the time and meetups
Kevin Phillips
@phillipskevin
Jan 22 2016 20:27
ok, awesome
if you haven’t, you should check out DoneJS
it’s our latest project that combines CanJS and StealJS and other tools that make it easy to build things out quickly
and there are some nice guides to get started
Adam Tourkow
@atourkow
Jan 22 2016 20:29
Yep, I've looked into that and will probably use it if building from scratch