These are chat archives for canjs/canjs

16th
Jul 2017
Eben
@eben-roux
Jul 16 2017 09:04
hello
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 09:04
Hello @eben-roux
Frank Lemanschik
@frank-dspeed
Jul 16 2017 09:04
hello again
what do we wanna do today :D
Eben
@eben-roux
Jul 16 2017 09:05
it seems as though when I set an attribute on my model then it results in some infinite loop
does that sound familiar?
Frank Lemanschik
@frank-dspeed
Jul 16 2017 09:05
ehm nope
but i know a way to produce a infinity loop
Eben
@eben-roux
Jul 16 2017 09:05
almost as if the method observes the change and then the change occurs in the method and then back to observing the change
lol
I'm sure you do
Frank Lemanschik
@frank-dspeed
Jul 16 2017 09:06
if your defining a setter with a start value that returns a value
Eben
@eben-roux
Jul 16 2017 09:06
if you have a fast enough machine then an infinite loop only takes 6 seconds to complete
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 09:06
almost as if the method observes the change and then the change occurs in the method and then back to observing the change
Frank Lemanschik
@frank-dspeed
Jul 16 2017 09:06

foo: {
  value: 1,
  set(val) {
    setTimeout(() => { this.foo+=1 }, 1000);
    return val;
  }
}
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 09:07

what you mean by that

almost as if the method observes the change and then the change occurs in the method and then back to observing the change

Frank Lemanschik
@frank-dspeed
Jul 16 2017 09:07
this will automatic infinty loop
and what cherif says is also right if you change the value the setter gets recalled and does what ever it does
Eben
@eben-roux
Jul 16 2017 09:07
let me see if I can put together a jsbin to illustrate
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 09:08
ok
Eben
@eben-roux
Jul 16 2017 10:45
of course I cannot reproduce this with a simple jsbin :( --- typical
anyway, I worked around the issue
what I was doing was actually "sub-optimal"...
Frank Lemanschik
@frank-dspeed
Jul 16 2017 10:46
ok
Eben
@eben-roux
Jul 16 2017 10:46
using {{#if}} render components or not is actually not the best way to go
Frank Lemanschik
@frank-dspeed
Jul 16 2017 10:46
i am happy that we could help you :)
the if thing works great
what else you can do ?
Eben
@eben-roux
Jul 16 2017 10:47
it is way better, IMHO, to rather bind to a class attribute like hidden
Frank Lemanschik
@frank-dspeed
Jul 16 2017 10:47
hmmm
i understand your issue :)
yes the hidden stuff is also ok
Eben
@eben-roux
Jul 16 2017 10:48
I reckon something goes wonky with the binding since, in effect, all the bindings have to be broken down and rebuilt
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 10:48
{{#if}}} render components?? you mean you have a condition to render a component?
Eben
@eben-roux
Jul 16 2017 10:48
had the same issue with Ember
@cherifGsoul yip
so mainly I guess it would work ok
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 10:48
it would work
Eben
@eben-roux
Jul 16 2017 10:48
in some complex binding scenarios I can understand that a framework would get itself in a bind
but I'm probably buggering something up
so if the {{#if}} uses something that changes then it could get tricky
Frank Lemanschik
@frank-dspeed
Jul 16 2017 10:49
@eben-roux it sounds ok for me else simply post your complet project on github
:D
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 10:49
what about {{#prop}} <your-component/>{{/prop}}
Frank Lemanschik
@frank-dspeed
Jul 16 2017 10:50
@cherifGsoul that sounds interristing never saw that
Eben
@eben-roux
Jul 16 2017 10:50
in my case it seems as though the Promise I bind to within the if block ends up in a loop of the infinite nature
Frank Lemanschik
@frank-dspeed
Jul 16 2017 10:50
what does that do what is prop?
does that check for boolen?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 10:50
@frank-dspeed checks if prop is defined
Eben
@eben-roux
Jul 16 2017 10:51
my whole project is actually on GitHub... been there for quite a while: https://github.com/Shuttle/Shuttle.Sentinel
Frank Lemanschik
@frank-dspeed
Jul 16 2017 10:51
hmmm ah hmmm but doesn't do if exactly the same?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 10:51
@frank-dspeed I dont remember exactely but has something with binding (computes)
Frank Lemanschik
@frank-dspeed
Jul 16 2017 10:52
ok thanks i will look into that sounds interristing :)
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 10:53
@eben-roux what is the template that causes the infinite loop?
Eben
@eben-roux
Jul 16 2017 10:53
let me commit and I'll link to the code in question... not that you'd be able to tell from only the code
this is the template:
instead of the current divs I had this:
Frank Lemanschik
@frank-dspeed
Jul 16 2017 10:56
<div class="{{#if showMessages}}hidden{{/unless}}">
Eben
@eben-roux
Jul 16 2017 10:56
{{#if showMessages}}
   --- stuffs ---
{{else}}
   --- stuffs ---
{{/if}}
Frank Lemanschik
@frank-dspeed
Jul 16 2017 10:56
in line 52
looks really bad
:D
your using if but end unless
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 10:56
@frank-dspeed yeah
Eben
@eben-roux
Jul 16 2017 10:56
pffft... let me fix that
but you get the idea... just changed it
Frank Lemanschik
@frank-dspeed
Jul 16 2017 10:56
i get the whole idea
you need to think more befor you code thats your workflow fail
your like i was befor 10 years
Eben
@eben-roux
Jul 16 2017 10:57
so what was happening is this:
Frank Lemanschik
@frank-dspeed
Jul 16 2017 10:57
you simply start coding and then fixing a big amount of code
Eben
@eben-roux
Jul 16 2017 10:57
it displays like so:
Frank Lemanschik
@frank-dspeed
Jul 16 2017 10:57
and that leads to errors
Eben
@eben-roux
Jul 16 2017 10:57
image.png
the I click on a message
Frank Lemanschik
@frank-dspeed
Jul 16 2017 10:58
you should write a more accurat software development plan maybe because this looks big
Eben
@eben-roux
Jul 16 2017 10:58
and it then looks like so:
image.png
then, when I click on the close it goes into an infinite loop here:
image.png
thanks for your concern Frank :)
but I have been doing this for a while and have my own way of working... I typically do things in a rather concrete fashion and refactor from there
Frank Lemanschik
@frank-dspeed
Jul 16 2017 11:00
i only want to speed you up with that as this flow don't works good with donejs canjs
its not easy to debug such big code sets
Eben
@eben-roux
Jul 16 2017 11:01
I did Ember development for 3 years writing components till it came out my ears... was in the front-end framework team producing the integration layer to a webMethods back-end for a 300 person team
anyway
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 11:02
@eben-roux the promise is already resolved
in the viewmodel
Eben
@eben-roux
Jul 16 2017 11:02
probably not easy but as I mentioned... I'll refactor if and when necessary :)
Eben
@eben-roux
Jul 16 2017 11:03
@cherifGsoul yes it is...
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 11:03
the template expects a promise
Eben
@eben-roux
Jul 16 2017 11:03
actually... is it?
Frank Lemanschik
@frank-dspeed
Jul 16 2017 11:04
@cherifGsoul the function returns a promis but a resolved one right
Eben
@eben-roux
Jul 16 2017 11:04
I have made changes so the way it works now is somewhat different
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 11:04
I dont understand what messages.list() does but if is returns a promise
Eben
@eben-roux
Jul 16 2017 11:04
how come you reckon the promise is resolved?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 11:05
get rid of then
Frank Lemanschik
@frank-dspeed
Jul 16 2017 11:05
or wrap the then
Frank Lemanschik
@frank-dspeed
Jul 16 2017 11:07
return new Promise(resolve, reject => {
  messages.list().then(()=> resolve(result))
})
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 11:07
just return return messages.list();
get rid of then
Eben
@eben-roux
Jul 16 2017 11:10
actually I was rendering the template from the messages...
so the template is actually: <sentinel-table {columns}="columns" {rows}="messages" {row-click}="@messageSelected" empty-message="message:no-messages" />
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 11:12
yes you do the resolving in the template and the viewmodel
Eben
@eben-roux
Jul 16 2017 11:12
I guess returning the promise proper would also work now
but that is what was looping... when I had the {{#if}} block; instead of just using hidden as I do now
let me check quick
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 11:13
@eben-roux are you influenced by domain modeling in the frontend?? :D
Eben
@eben-roux
Jul 16 2017 11:13
lol
possibly
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 11:14
self.hasMessages told me so, you like keep things in validated state :D
Eben
@eben-roux
Jul 16 2017 11:15
however, I had something like the hasMessages linked up to the promise as well and changed it since I thought that that may have contributed to the issue
anyway
I have a "workaround" for now
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 11:15
ok
Eben
@eben-roux
Jul 16 2017 11:15
I really don't get enough time to use canjs as I'm swamped by my day job
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 11:15
yeah like me :/
Eben
@eben-roux
Jul 16 2017 11:16
thanks for looking into it...
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 11:16
no problem any time :)
Eben
@eben-roux
Jul 16 2017 11:16
I actually spent the last couple of days removing can-connect :( --- I just could not get it working properly
just ate up too much time trying to get it to gel
Frank Lemanschik
@frank-dspeed
Jul 16 2017 11:18
oh that was not a good idea
i have a ultra pro tip for you @eben-roux prepare all your questions like when can-connect don't works
and ask then here for help with that
people like me or justin or cherif will then correct that
Eben
@eben-roux
Jul 16 2017 11:22
the thing is that making an ajax call is just so easy that having an abstraction layer over that may be overkill... but I'll have another look once I get my software in a working state
the Ember chaps had Ember.Data (or some such) way back and I remember we didn't bother with that since the disconnect with how we had to interact with our back-end was just too big
Frank Lemanschik
@frank-dspeed
Jul 16 2017 11:27
the can-connect layer is really good
the most bad with it is the behavier ordering
but i think if you want to use can-define-map you don't come around can-connect
i also waisted a lot of time coding around that
because i don't liked it all too
but its simply the way it works
i am preparing a better documentation and beginners guide at present for donejs canjs
but i have not much time for it :(
i know exactly how lost you feel
i gave this a cool name :)
i call it the CanJS Black Hole Issue
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 11:34
@eben-roux what are issues you find with can-connect?
I used is even with wordPress :)
Frank Lemanschik
@frank-dspeed
Jul 16 2017 11:35
@cherifGsoul you consumed wordpress api via can-connect or what do you mean?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 11:35
not realy api I did ajax
and all WP ajax requests should be with POST method
so:
getListData: function(params) {
    return promise = new Promise(function(resolve, reject){
        var request = {
          action: 'teq_fetch_social_posts',
          limit: params.limit,
          offset: params.offset,
        };
        $.ajax({
          url: ajaxurl,
          data: request,
          method: 'POST',
          success: function(response) {
            resolve(response);
          },
          error: function(response) {
            reject(response);
          }
        });
    });
  }
Frank Lemanschik
@frank-dspeed
Jul 16 2017 11:36
yes i know i am at present i am recoding wordpress in nodejs
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 11:36
I did an override for getListData
Frank Lemanschik
@frank-dspeed
Jul 16 2017 11:36
and even want to be as compatible as possible via executing old php plugins via php cli
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 11:38
this is a naive implemention :p
time to lunch
Frank Lemanschik
@frank-dspeed
Jul 16 2017 11:47
i would call it nativ implamentation not naiv :) as you wrote own getListData :) and not used behaviers
Eben
@eben-roux
Jul 16 2017 13:05
@cherifGsoul well... quite my point really ;) --- pretty easy to just abstract it yourself
Frank Lemanschik
@frank-dspeed
Jul 16 2017 13:05
he don't abstracted it
Eben
@eben-roux
Jul 16 2017 13:06
even so, perhaps I'm just not doing something correctly
Frank Lemanschik
@frank-dspeed
Jul 16 2017 13:06
he used the canJS way
Eben
@eben-roux
Jul 16 2017 13:06
my issue was that my data was being parameterized and not strigified
Frank Lemanschik
@frank-dspeed
Jul 16 2017 13:06
can-connect adds that methods
to the viewmodel
he wrote that by hand
Eben
@eben-roux
Jul 16 2017 13:06
so that is also part of my issue with can-connect
Frank Lemanschik
@frank-dspeed
Jul 16 2017 13:07
yes
this is even the exact solution to your problem :)
Eben
@eben-roux
Jul 16 2017 13:07
it seems to take an active record approach which is something I've never really liked
Frank Lemanschik
@frank-dspeed
Jul 16 2017 13:07
you need also to write such a getListData function
for your viewModel
because thats what the template calls
can-connect is a constructor that adds exactly that propertys like getListData
to your viewModel
:D
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 13:11
@frank-dspeed naive I mean there"s no checkings for example
Frank Lemanschik
@frank-dspeed
Jul 16 2017 13:12
yes sure i just wanted to make a good joke
:D
i got that point ;)
i am trying to get more funny :D
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 13:12
@frank-dspeed yeaaah thanks :)
Frank Lemanschik
@frank-dspeed
Jul 16 2017 13:12
justin last time told me that i write to rude i get readed like a troll
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 13:13
@eben-roux is not abstraction I tried to show how flexible can-connect can be :)
Frank Lemanschik
@frank-dspeed
Jul 16 2017 13:14
yes but now you need to tell him where to do that
exactly the same like you did it
he needs to do exactly the same
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 13:15
@frank-dspeed @eben-roux Ok the first thing is dont use superModel
Frank Lemanschik
@frank-dspeed
Jul 16 2017 13:16
i think he don't uses any model he used as far as i can see
only defineMap
now he wants to use can-connect with that map
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 13:16

2- here's the behaviors I use for that example:

var behaviors = [
    require( "can-connect/constructor/constructor" ),
    require( "can-connect/can/map/map" ),
    require( "can-connect/constructor/store/store" ),
    require( "can-connect/constructor/callbacks-once/callbacks-once" ),
    require( "can-connect/data/callbacks/callbacks" ),
    require( "can-connect/data/parse/parse" ),
    //require( "can-connect/data/url/url" )
];

the important thing is I dont use urlbehavior because it will be overwrited

I dont know if it's the right way to do for now it works for me but I didnt try this https://canjs.com/doc/can-connect/data/url/url.html
just instead of getListData: "GET /todos" I put getListData: "POST /todos"
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 13:23
the docs explain how to overwrite behaviors https://canjs.com/doc/can-connect.html#Overwritebehaviors
Frank Lemanschik
@frank-dspeed
Jul 16 2017 13:25
cherif
you forgot the can-connect part
you wrote the behaviers but no example for the rest :D
but your right
the documentation for this has much improved ! looks nice
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 13:27
@frank-dspeed here's the full code:
var behaviors = [
    require( "can-connect/constructor/constructor" ),
    require( "can-connect/can/map/map" ),
    require( "can-connect/constructor/store/store" ),
    require( "can-connect/constructor/callbacks-once/callbacks-once" ),
    require( "can-connect/data/callbacks/callbacks" ),
    require( "can-connect/data/parse/parse" ),
    //require( "can-connect/data/url/url" )
];

Status.connection = connect(behaviors,{
  Map: Status,
  List: Status.List,
  getListData: function(params) {
    return promise = new Promise(function(resolve, reject){
        var request = {
          action: 'teq_fetch_social_posts',
          limit: params.limit,
          offset: params.offset,
        };
        $.ajax({
          url: ajaxurl,
          data: request,
          method: 'POST',
          success: function(response) {
            resolve(response);
          },
          error: function(response) {
            reject(response);
          }
        });
    });
  },
  name: "status"
});

tag("status-model", Status.connection);

module.exports = Status;
@frank-dspeed look at localstorage example
Frank Lemanschik
@frank-dspeed
Jul 16 2017 13:30
yes i think that will help him
i am happy that i don't got this problems any more since i learned how can-connect works :)
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 13:31
Ok so I will ask you questions about can-connect!! :)
Frank Lemanschik
@frank-dspeed
Jul 16 2017 13:31
you can always ask me my frind
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jul 16 2017 13:31
thank you
I think we need to have more use cases from users so we can explain all aspects of can-connect
Frank Lemanschik
@frank-dspeed
Jul 16 2017 13:33
i am working on collecting such
i try to get the most complex and wide used needs
and then throw them to justin
so he can explain best practice on that