These are chat archives for canjs/canjs

18th
May 2017
Nico R.
@nriesco
May 18 2017 00:57
@BigAB that sounds like before using that setter the variable was not really an observable. Either that or the order in which was declared/defined/instantiated changes with the setter. Sometimes things work with a timeout of 1 or even 0 milliseconds
Gira Minus
@gKreator
May 18 2017 01:11
image.png
Gira Minus
@gKreator
May 18 2017 03:36
Anyway... just realized... CanJs4 is coming out soon?
Szabolcs Schmidt
@sszabolcs
May 18 2017 07:48

Please help me with the following problem: I'm trying to build the can-connect layer for my DefineMap models.
I see that there are two "finder" methods available in a connection (get, and getList) with which I can
query one of my models or all of them. To be more precise with getList I can use the set algebra to refine which
models I need.
But what if I have a complex query which I would like to write on the server side not on the client side with set algebra
and want to serve it through a custom REST GET URL.
Here is a dumb example:
GET /todos -> gives all todos
GET /todos/{id} -> returns one specific todo
GET /todos/specificTodos -> gives a list of todos based on a business logic

How shall I send a GET request to the specific URL (/todos/specificTodos) so that I can drive the request through
can-connect behaviors to enjoy the benefits of them (constructor/store for example)? Thanks!

Jeroen Cornelissen
@jeroencornelissen
May 18 2017 08:24
@sszabolcs can’t you pass params to your getList? Todo.getList({specificTodos: true, ...}) ?
You could als make a static function in your Todo model, that returns a promise.
var Todo = DefineMap.extend('Todo', {
    specificTodos: function (params) {
        return $.ajax({
            url      : '/Todos/specificTodos',
            type     : 'GET',
            dataType : 'json',
            data     : params,
        }).promise();
    },
}, {
    ...
});
Todo.specificTodos(params).then(function(data) {
    self.todos = new Todo.List(data);
});
Something like that?
Szabolcs Schmidt
@sszabolcs
May 18 2017 08:48

@jeroencornelissen Thank you for your ideas. The first suggestion could work but what if I have for example four specific list getter methods: specificTodos1, specificTodos2, and so on?

Todo.getList({specificTodos1: false, specificTodos2: false, specificTodos3: true, specificTodos4: false});

or

Todo.getList({todoListType: "specificTodos2"});

These could work but are not a clean solution...

The second suggestion could also work. My problem with that is that it is out of can-connect. No store for models queried like this for example.
I've read the Malleable Models article and understand that CanJS thinks in a different way regarding specific model queries. The way they designate is the use of algebra.
I think if I choose to write my own queries like your second suggestion then I have to accept the fact that there will be no store for my models.

Szabolcs Schmidt
@sszabolcs
May 18 2017 10:03

@jeroencornelissen I think I've found a good solution: the url option on connection creation can be an object overwriting get and getList methods. If I define the url option like this:

url: {
   getListData: function(url) {
      if (url) {
         return $.get(url, ...);
      }
      else {
         return $.get('/todos', ...);
      }
   }
}

And the request is driven through can-connect with store functionality!!!

If I send a custom URL to getList then the custom URL gets requested and with no URL parameter the default '/todos' gets queried.
Jeroen Cornelissen
@jeroencornelissen
May 18 2017 10:04
:+1: :clap:
That’s kind of what I meant with passing params to getList :smile:
Szabolcs Schmidt
@sszabolcs
May 18 2017 11:04
:smile: ok!
Nico R.
@nriesco
May 18 2017 15:17
is there a simple way to upload a file using canjs?
Brad Momberger
@bmomberger-bitovi
May 18 2017 15:18
We covered this in a community hangout some time back: http://retroaktive.me/blog/canjs-hangouts-upload-component/
The version of CanJS used is older, though (the hangout is from 3 years ago). You may need to adapt some of the code to CanJS 3.0
Nico R.
@nriesco
May 18 2017 16:18
seems easier
it will only upload the file when selected
and seems to work
Gregg Roemhildt
@roemhildtg
May 18 2017 16:34
Hey, I was thinking about trying to implement an accordion like component, similar to the tabs here: http://canjs.com/doc/can-component.html#Examples But I'm not sure how to go about accomplishing this, since it involves something like:
<header>
<content>
<header>
<content>
...
The tabs are easy, because all of the headers are above the content, but with accordions, the headers are split in between the content
Has anyone dealt with this issue before?
Gregg Roemhildt
@roemhildtg
May 18 2017 16:55
I found a simple solution in case it helps anyone. Instead of putting the clickable links in the tab-component, I put them in each tab-panel component.
Brad Momberger
@bmomberger-bitovi
May 18 2017 18:34
That works. Also, one thing you could do to accomplish an accordion like that is to bind a component like this:
{{ #each items as item }}
<my-accordion {(is-open)}="equal(~current, item)"/>
{{ / each }}
Dovid Bleier
@dbleier
May 18 2017 18:34
I have a define-get that calls an external api. I really only need it to call the api once and then always return the same value, which is what I thought happens in a get if the value doesn't change. However, every time the get is called, it calls the api again. How can I get it to store the value and not call the api every time?
            get(last) {
                return last ? last : b2bapis.b2bcontrol.getURLLauncherAddress();
            },
Brad Momberger
@bmomberger-bitovi
May 18 2017 18:35
Because it's a two-way binding, you can set isOpen to true inside the component, and then it will set current to that item in the outer component's view model
@dbleier is getURLLauncherAddress() backed by a can-connect connection with caching?
(That might be a way around it)
Also, this one's a little more off the cuff, but if you have a getter and no setter, you might want to try adding an explicit setter.
Dovid Bleier
@dbleier
May 18 2017 18:37
no, this code runs on a device and getURLLauncherAddress() is a local native api
Brad Momberger
@bmomberger-bitovi
May 18 2017 18:37
got it
Dovid Bleier
@dbleier
May 18 2017 18:37
I have a setter too, I just didn't post it
            set(newurl) {
                b2bapis.b2bcontrol.setURLLauncherAddress(newurl, function() {});
                return newurl;
            }
Brad Momberger
@bmomberger-bitovi
May 18 2017 18:38
Hm. I'd recommend just changing your get() to a value() to pull an initial value. You can still have the setter function as normal.
Dovid Bleier
@dbleier
May 18 2017 18:38
ah, good idea, let me try that
Dovid Bleier
@dbleier
May 18 2017 18:49
seems like that worked. Thanks @bmomberger-bitovi
Brad Momberger
@bmomberger-bitovi
May 18 2017 18:50
Excellent. Happy to help
Gregg Roemhildt
@roemhildtg
May 18 2017 19:02
@bmomberger-bitovi is equal a built-in helper?
Nils Lundquist
@nlundquist
May 18 2017 19:05
i believe equal is aliased to is https://canjs.com/doc/can-stache.helpers.is.html
Brad Momberger
@bmomberger-bitovi
May 18 2017 19:05
That's eq. equal is a can-stache-converter
Nils Lundquist
@nlundquist
May 18 2017 19:06
ah
Brad Momberger
@bmomberger-bitovi
May 18 2017 19:06
(nb: you'll need to import can-stache-converters to use the equal solution)
Gregg Roemhildt
@roemhildtg
May 18 2017 19:06
Ah
I see
Gregg Roemhildt
@roemhildtg
May 18 2017 19:20
I haven't played with converters but I really should. They look quite spectacular
Brad Momberger
@bmomberger-bitovi
May 18 2017 19:23
Converters were created pretty much to solve the problem of how to effectively two-way bind view model data and form elements. I improved the docs recently to better show this, but they haven't gone into mainline yet.
You can make your own converters as well; under the hood they're Stache helpers that get an extra parameter when being called in the setter direction. We just abstract that part away in registerConverter and let you provide handlers for get and set
Frank Lemanschik
@frank-dspeed
May 18 2017 19:55
hmmmm
i use {{eq}}
without can-stache-converters
Brad Momberger
@bmomberger-bitovi
May 18 2017 19:56
eq is a stache helper. equal is a converter.
Gregg Roemhildt
@roemhildtg
May 18 2017 19:56
Converters are really neat. That's what I like about canjs. Its easy to learn at first, but there's always more
Frank Lemanschik
@frank-dspeed
May 18 2017 19:57
easy to learn depends on your starting usecase and example
:D
the stuff that i did with it was not easy to learn every other framework was more easy :)
no hate but i need to say that
Gregg Roemhildt
@roemhildtg
May 18 2017 19:58
Well, I knew handlebars a bit before I got started with canjs. What's another framework you'd recommend as being easier?
Frank Lemanschik
@frank-dspeed
May 18 2017 19:58
first time i never understood what did what :)
Gregg Roemhildt
@roemhildtg
May 18 2017 19:58
I'm not super familiar with other js frameworks
Brad Momberger
@bmomberger-bitovi
May 18 2017 19:59
I had a hell of a time getting Angular to do the things that were easy in CanJS 2.1, like recursive templates.
Frank Lemanschik
@frank-dspeed
May 18 2017 19:59
i am familar with near any framework because i am hobby freelancer
Gregg Roemhildt
@roemhildtg
May 18 2017 19:59
vue.js looks really cool.
Frank Lemanschik
@frank-dspeed
May 18 2017 19:59
Brad i made it often simple
to bind elements i simply attached custom classes
and then selected that if they need some update
so for example i assign class="post id-2"
then i select post + id-2
that worked also well for deep stuff
Gregg Roemhildt
@roemhildtg
May 18 2017 20:01
I guess my use case is fairly simple. I could see it getting really difficult with canjs and having several different levels of nested components
and passing props up to the parent from a child..etc
Frank Lemanschik
@frank-dspeed
May 18 2017 20:01
or i write in a onClick with the id like onClick=removeThis(3)
passing probs is not a problem
:D
having the probs
and get them updating is a problem
for example i do a lot of porn managment stuff
where i have complex situations of composed data
from diffrent sources
but i found a easy way to do that :) for all my diffrent stuff i create feathers end points then i use that
for getting canjs working with live updates
but often it would be more simple to drop that extra layer but who cares as long as it works
Gregg Roemhildt
@roemhildtg
May 18 2017 20:05
are you using feathers + donejs or just plain canjs
Frank Lemanschik
@frank-dspeed
May 18 2017 20:05
always donejs
because got to much trouble getting steal to work
at beginning
:D
but now i get it even working stand alone whooo huuu
i prefer donejs still i like the add component stuff
Gregg Roemhildt
@roemhildtg
May 18 2017 20:06
yeah, the generators look really helpful
Frank Lemanschik
@frank-dspeed
May 18 2017 20:06
i use them for prototyping :D
i create the structure of all needed parts first
with the generators
and later i look at the folders and know what to code
overall canjs is well once you understand it :)
and if you don't understand it you can easy bypass it :)
and use jquery for some elements to update
Gregg Roemhildt
@roemhildtg
May 18 2017 20:08
that's probably a good way to state it
Frank Lemanschik
@frank-dspeed
May 18 2017 20:08
and still use the packaging from steal
Gregg Roemhildt
@roemhildtg
May 18 2017 20:08
the steal packaging is really nice
Frank Lemanschik
@frank-dspeed
May 18 2017 20:08
it was the main reason for me to look into canjs
:D
Gregg Roemhildt
@roemhildtg
May 18 2017 20:08
i wish I could use it to package up a dojo app
dojo-build-tools are not fun
Frank Lemanschik
@frank-dspeed
May 18 2017 20:09
overall all frameworks need some special stuff to learn
at beginning i tought canjs is easy
but then i found out that really simple tasks
Brad Momberger
@bmomberger-bitovi
May 18 2017 20:09
Is there something in particular that's blocking a dojo app from being built with steal?
Frank Lemanschik
@frank-dspeed
May 18 2017 20:09
can get hard if you don't know the canjs way of doing it
dojo is python right?
Gregg Roemhildt
@roemhildtg
May 18 2017 20:10
Generally, most build tools are not working with dojo plugins. I think there's a web pack plugin now for some of them but its not stable
the dojo toolkit, its another js framework
Frank Lemanschik
@frank-dspeed
May 18 2017 20:10
why should steal not work with it
does it export globals?
as steal simply follows the require import stuff starting from main
there is normal only one exempt that needs manual config
global exports
Gregg Roemhildt
@roemhildtg
May 18 2017 20:11
The plugins are in reverse order, and they do weird things. Like:
define([ 'dojo/i18n!./nls/file'], function(i18n){})
Brad Momberger
@bmomberger-bitovi
May 18 2017 20:12
hmm. That would be difficult to interop well with other things, but there's some support in steal already for processors like that.
Gregg Roemhildt
@roemhildtg
May 18 2017 20:13
there isn't globals afaik, but myself and many others have struggled getting the plugins to load correctly with any loader other than the dojo loader
The i18n plugin looks up the browsers language, and imports the right language file if it exists. But it also does some weird things in the dojo build toolkit to allow for bundling different language files as separate modules
Brad Momberger
@bmomberger-bitovi
May 18 2017 20:15
steal-conditional does that now too :) but the syntax is different.
Gregg Roemhildt
@roemhildtg
May 18 2017 20:16
right, that's the issue. All of the dojo widget libraries basically use this syntax
I suppose I could make a plugin that would let steal handle plugin first syntax, and that would probably be the best place to start
Brad Momberger
@bmomberger-bitovi
May 18 2017 20:41
A dojo processor would probably have to define its own version of the AMD loader. The original one is here: https://github.com/stealjs/steal/blob/master/src/base/lib/extension-amd.js
Janatbek Sharsheyev
@Janatbek
May 18 2017 22:24
Hello guys
new to canJS
Kevin Phillips
@phillipskevin
May 18 2017 22:24
Hello, welcome
Janatbek Sharsheyev
@Janatbek
May 18 2017 22:26
what is the best way to start up and running with canJS? it's own website and documentation? or some youtube tutorial?
Kevin Phillips
@phillipskevin
May 18 2017 22:27
yeah, probably start with the chat guide: http://canjs.com/doc/guides/chat.html
Janatbek Sharsheyev
@Janatbek
May 18 2017 22:32
Thank you. I just started chatGuide
happy to see you all here.