These are chat archives for canjs/canjs

30th
Dec 2015
Adam Tourkow
@atourkow
Dec 30 2015 00:17
how can I debug what's come back from findAll? I see the API call, the isRejected is firing though.
oooh... findAll looks for a list, findOne uses a map
Guido Smeets
@gsmeets
Dec 30 2015 00:35
heh, @justinbmeyer with some more precise benchmarking I've come to the conclusion that can.stache( <TEMPLATE STRING> ) is about 7-10x faster than stache( INTERMEDIATE )
beats me why
maybe it's my use of can.view.preload that is slowing things down
meh
Adam Tourkow
@atourkow
Dec 30 2015 00:39
I have a table row I want to use with two different kinds of data. is the best way to implment that with {{> my_table_row}} ?
Adam Tourkow
@atourkow
Dec 30 2015 00:50
I went with that :)
Adam Tourkow
@atourkow
Dec 30 2015 05:23
This message was deleted
This message was deleted
Justin Meyer
@justinbmeyer
Dec 30 2015 16:59
@gsmeets you are using stache?
how are you doing this?
b/c intermediate should skip the whole parsing phase
Mohamed Cherif Bouchelaghem
@cherifGsoul
Dec 30 2015 18:11
Adam Tourkow
@atourkow
Dec 30 2015 19:36
I'm trying to make a jsfiddle, but I can't link to https://canjs.com/release/2.3.7/can.jquery.js (httpS). jsfiddle requires https
Adam Tourkow
@atourkow
Dec 30 2015 19:50
http://jsfiddle.net/subsonic/889mas2g/ {{test}} isn't working for me. I want a global helper. (there's more to it)
Kevin Phillips
@phillipskevin
Dec 30 2015 19:51
can you use jsbin instead?
there’s a template for jsbin at the top
Adam Tourkow
@atourkow
Dec 30 2015 19:52
Lemme try
Kevin Phillips
@phillipskevin
Dec 30 2015 19:52
your template is set to text/mustache
should be text/stache
Adam Tourkow
@atourkow
Dec 30 2015 19:53
@phillipskevin Ahh thanks. Now I can continue
@phillipskevin http://jsfiddle.net/subsonic/889mas2g/1/ What do I need to do to make the template keep updating?
Kevin Phillips
@phillipskevin
Dec 30 2015 19:57
_server_time_ needs to be an observable like a can.compute or an instance of a can.Map
Adam Tourkow
@atourkow
Dec 30 2015 19:58
Awesome. I couldn't figure that out based on this: http://canjs.com/guides/CreateALiveTimestamp.html
Sorry everybody for all the n00b questions
Kevin Phillips
@phillipskevin
Dec 30 2015 20:00
no problem at all
so I just changed _server_time_ to be a compute, the same way that example set up now
Adam Tourkow
@atourkow
Dec 30 2015 20:01
Yeah, but what was confusing me was that now had new Date() in it
Kevin Phillips
@phillipskevin
Dec 30 2015 20:02
yeah, it’s a little bit different than what you’re trying to do
Adam Tourkow
@atourkow
Dec 30 2015 20:03
Well, ultimately, I'm planning on converting that to mm:ss countdown
But this helps a lot. Thank you
Kevin Phillips
@phillipskevin
Dec 30 2015 20:04
sure, no problem
Adam Tourkow
@atourkow
Dec 30 2015 20:11
Is this the best way to go about setting a countdown? Basically, if a certain value is set, then display a countdown, there could be more than one.
Kevin Phillips
@phillipskevin
Dec 30 2015 20:25
I haven’t written enough countdowns to say for sure what the best way is. The way I might do it is by using the define plugin. Something like this: http://jsfiddle.net/vd8jencj/
since that most closely resembles the way you described it. “if the value is set, display a countdown"
and that way, the countdown is encapsulated to just that property
Adam Tourkow
@atourkow
Dec 30 2015 20:27
Right, which is sweet
@phillipskevin So I have my app.js based on this Where would I plugin your can.map.extend? Into the var AppState create? And, I guess how would I set value:
Kevin Phillips
@phillipskevin
Dec 30 2015 20:32
if the countdown is a global thing you can add it onto the AppState
in line 2
not sure what you mean about how to set the value
also, since appState is being used for routing, make sure to put serialize: false into the define block
otherwise your countdown will always update the URL
Adam Tourkow
@atourkow
Dec 30 2015 21:08
@phillipskevin Thanks for the tips. WRT setting the value, you have value: 1000, how would that be set? Like, could I do `{{countdown start_value}}``
Kevin Phillips
@phillipskevin
Dec 30 2015 21:09
where is start_value coming from?
Guido Smeets
@gsmeets
Dec 30 2015 21:09

@justinbmeyer I'm using stache yeah, with my requirejs plugin I showed you the other day. This is my test code:

        write: function ( plugin, module, write ) {
            if ( buildMap.hasOwnProperty( module )) {
                var data = buildMap[ module ];

                data.imports.unshift( "can" );

                var deps = JSON.stringify( data.imports.concat( data.partials ));

                write.asModule(
                    plugin + "!" + module, 
                    "define(" + deps + ", function ( can ) {\n  window.time = (window.time || 0) - performance.now(); var foo = can.stache( '" + data.id + "', '" + esc( data.template ) + "' ); window.time = window.time + performance.now(); return foo;\n" + "});\n" 
                );
            }
        }

vs

        write: function ( plugin, module, write ) {
            if ( buildMap.hasOwnProperty( module )) {
                var data = buildMap[ module ];

                data.imports.unshift( "can/view/stache" );
                data.imports.unshift( "can" );

                var deps = JSON.stringify( data.imports.concat( data.partials ));

                write.asModule(
                    plugin + "!" + module, 
                    "define(" + deps + ", function ( can, stache ) {\n" + 
                        "\window.time = (window.time || 0) - performance.now(); var foo = can.view.preload( '" + data.id + "', stache(" + data.intermediate + ")); window.time = window.time + performance.now(); return foo; \n" + 
                    "});\n" 
                );
            }
        }
so I'm measuring just the template creation basically
I'm calling can.view.preload in the second example, because I don't use can-import for views, if I don't cache them by id they're not found
I'll benchmark it without the call to preload, see if that makes the diff
preload uses a deferred, maybe that forces it to wait for the next repaint loop
Adam Tourkow
@atourkow
Dec 30 2015 21:23
@phillipskevin like {{#song}} {{name}} {{countdown start_value}} {{/song}}
Kevin Phillips
@phillipskevin
Dec 30 2015 21:26
ok, can you just change countdown to something like remaining_time ?
Adam Tourkow
@atourkow
Dec 30 2015 21:28
@phillipskevin The name of the value isn't important. What's confusing me is you have in your define: value: 1000 How do I have the 1000 be a variable?
Kevin Phillips
@phillipskevin
Dec 30 2015 21:30
ok, I just misunderstood how you’re using it. one sec. let me think about it.
Adam Tourkow
@atourkow
Dec 30 2015 21:30
thanks for your help, I'm sure you're busy
I'm waiting for that "ah-ha" moment where all this stuff just starts to make more sense.
Adam Tourkow
@atourkow
Dec 30 2015 21:37
The proper way to get current url values in of can.route given can.route(':page/:slug', { slug: null }); is to use can.route.attr('slug') right?
Kevin Phillips
@phillipskevin
Dec 30 2015 21:37
right
Adam Tourkow
@atourkow
Dec 30 2015 21:37
at least I figured out something correct. :)
Justin Meyer
@justinbmeyer
Dec 30 2015 21:46
@gsmeets yeah, I'm curious to know what's going on
there might be something I overlooked
I never checked performance because there was seemingly no reason to
the intermediate has the parsed out arguments
Guido Smeets
@gsmeets
Dec 30 2015 21:47
if I call can.stache with the intermediate instead of the template in my first example the multiplier is x2-x3, instead of x7-x10
Justin Meyer
@justinbmeyer
Dec 30 2015 21:47
so there should be a lot less going on
Guido Smeets
@gsmeets
Dec 30 2015 21:47
but it's still slower
Justin Meyer
@justinbmeyer
Dec 30 2015 21:47
yeah, that doesn't make much sense
Kevin Phillips
@phillipskevin
Dec 30 2015 21:49
@atourkow I would use a component for your countdown timer. here’s an example: http://jsbin.com/panudikiti/1/edit?html,js,output
it should be looping through and calling the same handler methods
Kevin Phillips
@phillipskevin
Dec 30 2015 21:50
@atourkow uses the same code as before, but wraps it in a component so you can create multiple timers and set their initial values in the page
Guido Smeets
@gsmeets
Dec 30 2015 21:50
still though, it's 5ms vs 10 ms on 200kb of js code + templates
Justin Meyer
@justinbmeyer
Dec 30 2015 21:51
for all templates?
how many templates?
Adam Tourkow
@atourkow
Dec 30 2015 21:51
ANother question: I use this pastebin code on first click it works but other clicks I get error Uncaught TypeError: Cannot read property 'push' of null When clicking between links. What am I doing wrong? :(
Guido Smeets
@gsmeets
Dec 30 2015 21:52
two layers, one is approx 50 stache files, the other 20
Adam Tourkow
@atourkow
Dec 30 2015 21:52
@phillipskevin Ahh, I like the use of component there. Thanks!
Guido Smeets
@gsmeets
Dec 30 2015 21:52
it's 5ms for the parsing, and 10ms for the intermediates
Kevin Phillips
@phillipskevin
Dec 30 2015 21:57
@atourkow hard to tell what the issue is with the pastebin
do you have more of a stack trace?
Adam Tourkow
@atourkow
Dec 30 2015 21:58
from the error?
Kevin Phillips
@phillipskevin
Dec 30 2015 21:58
yeah
Adam Tourkow
@atourkow
Dec 30 2015 22:01
@phillipskevin http://justpaste.it/q27j <-- this is the error expanded. http://justpaste.it/q27n is from the console, at the bottom is the error
oh
Adam Tourkow
@atourkow
Dec 30 2015 22:06
It's something to do with can.route.attr('slug'); and pushstate I think
If I take out var slug = can.route.attr('slug'); I don't get the error
Kevin Phillips
@phillipskevin
Dec 30 2015 22:10
are you using queue in your template?
Adam Tourkow
@atourkow
Dec 30 2015 22:10
yeah
If I just set var slug = 'requests' it works fine. The can.route.attr('slug'); is tripping things up. I'm using the pushstate plugin. I might remove it and see if it works right.
Kevin Phillips
@phillipskevin
Dec 30 2015 22:13
so that will re-run any time slug changes in your route
using .attr means that whenever that value changes it will run that get() again
so maybe it’s changing to null or something and it’s trying to run findOne when it shouldn't
Adam Tourkow
@atourkow
Dec 30 2015 22:14
Hmm, so having it in the define is in the wrong place?
Kevin Phillips
@phillipskevin
Dec 30 2015 22:15
could be… if that’s not what you want to happen
but you probably do want that queue to update whenever slug changes
Adam Tourkow
@atourkow
Dec 30 2015 22:16
Right..
Kevin Phillips
@phillipskevin
Dec 30 2015 22:16
so a couple guesses are… you might need to check that slug is a certain value before running findOne
Adam Tourkow
@atourkow
Dec 30 2015 22:16
It breaks even when clicking between slugs (so it's not null)
Lemme add a check
Kevin Phillips
@phillipskevin
Dec 30 2015 22:17
also, you want to make sure you’re using the queue property as a promise. something like:
{{#if queue.isResolved}}
    {{queue.value}}
{{/if}}
Adam Tourkow
@atourkow
Dec 30 2015 22:17
Yep, i got that
how'd you do that blockqupte?
Kevin Phillips
@phillipskevin
Dec 30 2015 22:17
“```js” before
and “```” after
instead of putting that code in the get, you could put it in the value
then it will only run to get the initial value
Adam Tourkow
@atourkow
Dec 30 2015 22:20
{{#with queue}}
  {{#if isPending}}
    <div>Loading Queue</div>
  {{else}}
...
{{/if}}
So, that's correct.
Guido Smeets
@gsmeets
Dec 30 2015 22:24
@justinbmeyer are there noticable changes to intermediates or parsing in 2.3.x?
I'm running 2.2.6 atm I think
I'll try upgrading and bench some more
Justin Meyer
@justinbmeyer
Dec 30 2015 22:24
I don't think so
Adam Tourkow
@atourkow
Dec 30 2015 22:25
@phillipskevin Ok, moved into into the value. However, now clicking on the links doesn't change the values.
I can refresh the page, and it'll load each one, but not on click.
Kevin Phillips
@phillipskevin
Dec 30 2015 22:26
hmm, yeah, that probably wasn’t a very good suggestion
Adam Tourkow
@atourkow
Dec 30 2015 22:27
lol. :) It's ok.
Kevin Phillips
@phillipskevin
Dec 30 2015 22:27
I’m not sure what is causing that error
Adam Tourkow
@atourkow
Dec 30 2015 22:28
yesterday I was like, "darnit, just only use jQuery" lol
I bet it's something to do with pushstate plugin
Kevin Phillips
@phillipskevin
Dec 30 2015 22:29
only other thing I can think of is that it’s related to the data returned by your model for one of the slug values
should it be a findAll ? I would assume queue would be a list
Adam Tourkow
@atourkow
Dec 30 2015 22:30
Nope, it'll load on page refresh, just not on click. And queue is a map with some lists in it
Kevin Phillips
@phillipskevin
Dec 30 2015 22:30
ok
Kevin Phillips
@phillipskevin
Dec 30 2015 22:31
I’m out of ideas. maybe @justinbmeyer has an idea.
Justin Meyer
@justinbmeyer
Dec 30 2015 22:31
what's the issue?
Kevin Phillips
@phillipskevin
Dec 30 2015 22:33
basically, @atourkow is trying to refresh some data from a model when the route changes.
  define: {
        queue: {
            get: function() {
                var slug = can.route.attr('slug');
                return StationQueue.findOne({station_slug: slug});
            }
        }
    }
Justin Meyer
@justinbmeyer
Dec 30 2015 22:33
can you get it in a jsbin?
Adam Tourkow
@atourkow
Dec 30 2015 22:33
perhaps, but that page uses an API and the queue is some pages deep
Kevin Phillips
@phillipskevin
Dec 30 2015 22:34
works the first time, fails when the route changes
does routing work in jsbin?
Justin Meyer
@justinbmeyer
Dec 30 2015 22:34
StationQueue = can.Model.extend({
  findOne: function(){
    return $.Deferred().resolve({ ... fake data ...})
  }
})

does routing work in jsbin?

yes, but you can't easily see the URL

Kevin Phillips
@phillipskevin
Dec 30 2015 22:35
ok, cool. I didin’t know that.
Adam Tourkow
@atourkow
Dec 30 2015 22:35
the error Uncaught TypeError: Cannot read property 'push' of null I was going to check if it's because of the pushstate plugin.
Justin Meyer
@justinbmeyer
Dec 30 2015 22:35
oh, does it only happen w/ pushstate?
Adam Tourkow
@atourkow
Dec 30 2015 22:35
I haven't tested that yet, was going to remove the plugin
just made a new custom build without the plugin
Justin Meyer
@justinbmeyer
Dec 30 2015 22:36
Uncaught TypeError: Cannot read property 'push' of null ... where is this happening?
Adam Tourkow
@atourkow
Dec 30 2015 22:37
@justinbmeyer I have the minified custom plugin. Should I just include them all separately?
Actually, yes... lemme do that
Justin Meyer
@justinbmeyer
Dec 30 2015 22:37
@atourkow I would consider using steal
in general, I never develop against any minified files
it's too hard to walk through
if not steal, browserify, requirejs, etc
Adam Tourkow
@atourkow
Dec 30 2015 22:38
is there a simple example of canJS with steal? The donejs example is overkill for me
Justin Meyer
@justinbmeyer
Dec 30 2015 22:38
any module loader
Adam Tourkow
@atourkow
Dec 30 2015 22:39
I'm not using NPM
Justin Meyer
@justinbmeyer
Dec 30 2015 22:39
any reason why not?
I'd really encourage you to get on NPM ... everything is going up on there
(bower was dead for a bit ... a few people jumped in to maintain it ... but it's still barely limping along)
everything Bitovi makes gets put on npm
Adam Tourkow
@atourkow
Dec 30 2015 22:42
I've neverused it before. Looking at it now
Justin Meyer
@justinbmeyer
Dec 30 2015 22:43
ah, your life is about to get better
Adam Tourkow
@atourkow
Dec 30 2015 22:43
We'll see. Trying to figure out where I run the npm install command
Justin Meyer
@justinbmeyer
Dec 30 2015 22:44
in your "root" folder
so .. where do you have canjs right now?
Adam Tourkow
@atourkow
Dec 30 2015 22:44
docroot that is
public facing?
Justin Meyer
@justinbmeyer
Dec 30 2015 22:44
not sure what you mean
basically ... in most apps setup
you have your server code
and some public folder for JS / CSS
\ROOT
   \public
   \server-folder1
   \server-folder2
something like that?
Adam Tourkow
@atourkow
Dec 30 2015 22:45
well, like I have like site/serversidecode and like site/html (which is public)
is similar
Adam Tourkow
@atourkow
Dec 30 2015 22:45
yeah
Justin Meyer
@justinbmeyer
Dec 30 2015 22:46
ok ... so probably site/html
is where you'll run npm install can --save
Adam Tourkow
@atourkow
Dec 30 2015 22:46
Ok, so browsers can see it :)
Justin Meyer
@justinbmeyer
Dec 30 2015 22:46
yeah
are you using git?
what's your version control?
Adam Tourkow
@atourkow
Dec 30 2015 22:46
yes
Justin Meyer
@justinbmeyer
Dec 30 2015 22:47
npm install will create a node_modules folder
you will want to ignore that
you'll want your deploy script to run cd site/html && npm install
basically, don't check in your node_modules folder
Adam Tourkow
@atourkow
Dec 30 2015 22:48
Ok, it's getting it now
Justin Meyer
@justinbmeyer
Dec 30 2015 22:49
this will create a package.json ... make sure that gets checked in
this basically tells NPM what to install
when someone else runs npm install
(if you are sharing this code with others)
Adam Tourkow
@atourkow
Dec 30 2015 22:51
> npm install can --save
> npm install steal --save
> npm install jquery --save
I saw install can --save install jquery is the npm install jquery --save redundant
Adam Tourkow
@atourkow
Dec 30 2015 22:57
@justinbmeyer Error loading "package.json!npm" I don't see it . Like, it wasn't created
oh
Justin Meyer
@justinbmeyer
Dec 30 2015 23:04
@atourkow it's only redundant if you never plan on directly importing jquery
did you figure out the package.json problem?
Adam Tourkow
@atourkow
Dec 30 2015 23:05
No :(
I thought I needed --save-dev but that didn't help
Adam Tourkow
@atourkow
Dec 30 2015 23:37
@justinbmeyer Needed npm init :)