These are chat archives for canjs/canjs

22nd
Mar 2016
Jeroen Cornelissen
@jeroencornelissen
Mar 22 2016 08:14
How do you know when a stache template is done rendering?
{{#with activeForm}}
    {{>sub_template_form_items}}
{{/with}}
Thomas Sieverding
@Bajix
Mar 22 2016 08:15
There’s a callback with the document fragment if you call it async, otherwise it’ll load and render w/ a synchronous request
Jeroen Cornelissen
@jeroencornelissen
Mar 22 2016 08:16
the activeForm is changed dynamically in my component and i need to know when it finisheses rendering.
Thomas Sieverding
@Bajix
Mar 22 2016 08:17
Inserted event
You could do ($insert)=“attr(‘elem’, $element)"
Jeroen Cornelissen
@jeroencornelissen
Mar 22 2016 08:19
inserted event is only triggered once, when the form-component is inserted not when the activeForm changes
Thomas Sieverding
@Bajix
Mar 22 2016 08:19
You can put the inserted event on an element within the template
Julian
@pYr0x
Mar 22 2016 08:20
@Bajix where are you from?
Thomas Sieverding
@Bajix
Mar 22 2016 08:20
LA
Julian
@pYr0x
Mar 22 2016 08:20
what time is it?
Thomas Sieverding
@Bajix
Mar 22 2016 08:20
1:20 AM
Julian
@pYr0x
Mar 22 2016 08:20
:D
:+1:
Thomas Sieverding
@Bajix
Mar 22 2016 08:21
You?
Julian
@pYr0x
Mar 22 2016 08:21
germany
i am on work :)
Thomas Sieverding
@Bajix
Mar 22 2016 08:21
Sprechen sie deutsch?
Julian
@pYr0x
Mar 22 2016 08:21
yep
you too?
Thomas Sieverding
@Bajix
Mar 22 2016 08:21
:D
Ein bißchen
Julian
@pYr0x
Mar 22 2016 08:22
;)
you worked with canjs a lot?
Thomas Sieverding
@Bajix
Mar 22 2016 08:22
Yup
3 years
Julian
@pYr0x
Mar 22 2016 08:23
ah you are there, he is working with borcoli?
Thomas Sieverding
@Bajix
Mar 22 2016 08:23
yup
Julian
@pYr0x
Mar 22 2016 08:23
i did a electron example app with steal and gulp
if you want maybe you can do it with brocoli
Thomas Sieverding
@Bajix
Mar 22 2016 08:24
Oh I’ll check that out
I like Broccoli > Steal
Julian
@pYr0x
Mar 22 2016 08:24
as i said in the hangout, i would like to use the filesystem as a interface for building apps
Thomas Sieverding
@Bajix
Mar 22 2016 08:24
Well, Broccoli/System/JSPM together
That’s basically what I’ve done
Julian
@pYr0x
Mar 22 2016 08:25
and how do you transpile stache?
and use thinks like can-import
Thomas Sieverding
@Bajix
Mar 22 2016 08:26
I merge some trees, process my SCSS etc into a staging tree, then I run that through broccoli-system-builder, merge it with my staging tree, then run that through a normal build
var traverseTree = require('systemjs-builder/lib/arithmetic').traverseTree,
  SystemBuilder = require('broccoli-system-builder'),
  writeConfig = require('broccoli-config-writer'),
  mergeTrees = require('broccoli-merge-trees'),
  mapSeries = require('promise-map-series'),
  bourbon = require('bourbon').includePaths,
  compileSass = require('broccoli-sass'),
  htmlmin = require('broccoli-htmlmin'),
  replace = require('broccoli-replace'),
  walkSync = require('walk-sync'),
  mkdirp = require('mkdirp'),
  config = require('config'),
  path = require('path'),
  url = require('url'),
  fs = require('fs'),
  staging = [];

var core = mergeTrees([
  writeConfig('config.js'),
  'assets',
  'admin',
  'chat'
], {
  overwrite: true
});

core = htmlmin(core, {
  empty: true
});

core.extensions = ['stache']
core.targetExtension = 'stache';

var vendor = replace('vendor', {
  files: [
    'system.config.js'
  ],
  patterns: [
    {
      match: 'baseURL',
      replacement: config.hosts.chat + '/assets/'
    }
  ]
});

var assets = mergeTrees([
  'jspm',
  vendor,
  core,
], {
  overwrite: true
});

staging.push(assets);
staging.push(compileSass([assets].concat(bourbon), 'chat/styles.scss', 'chat/styles.css'));
staging.push(compileSass([assets].concat(bourbon), 'admin/styles.scss', 'admin/styles.css'));
staging.push(compileSass([assets].concat(bourbon), 'oauth/styles.scss', 'oauth/styles.css'));
staging.push(compileSass([assets].concat(bourbon), 'oauth/visualcaptcha.scss', 'oauth/visualcaptcha.css'));

staging.push(SystemBuilder(assets, '/', 'system.config.js', function( builder, sourceDir, destDir ) {
  builder.config({
    packages: {
      can: {
        map: {
          './util/util': './util/domless/domless'
        }
      }
    },
    meta: {
      jquery: {
        format: 'global',
        exports: 'jQuery',
        deps: [
          'can/util/vdom/vdom'
        ]
      }
    },
    map: {
      stache: 'can/view/stache/system'
    }
  });

  var dirName = url.parse(builder.loader.baseURL).pathname,
    paths = walkSync(dirName);

  return mapSeries(paths, function( pathname ) {
    if (path.extname(pathname) === '.stache') {
      return builder.trace('[' + pathname + '!]').then(function( tree ) {
        pathname = path.join(destDir, pathname + '.js');

        Object.keys(tree).map(function( key ) {
          mkdirp.sync(path.dirname(pathname));
          fs.writeFileSync(pathname, tree[key].source);
        });
      });
    }
  });
}));

staging = module.exports = mergeTrees(staging);

if (!~process.argv.indexOf('--broccoli')) {
  var build = SystemBuilder(staging, '/', 'system.config.js', function( builder ) {

    var bundles = [
      'chat/embed.js'
    ].map(function( moduleName ) {
      return builder.bundle(moduleName, moduleName, config.build.options);
    });

    return Promise.all(bundles);
  });

  module.exports = mergeTrees([
    staging,
    build
  ], {
    overwrite: true
  });
}
IMO it’s simpler to do separate trees then to try and hot swap the config like steal does
Each tree caches independently as well, so there’s no down side
Julian
@pYr0x
Mar 22 2016 08:28
where is the normal build ?
Thomas Sieverding
@Bajix
Mar 22 2016 08:29
if (!~process.argv.indexOf('--broccoli')) { … }
Where I do the bundle after the first
Julian
@pYr0x
Mar 22 2016 08:29
and transpiling stache?
Thomas Sieverding
@Bajix
Mar 22 2016 08:31
staging.push(SystemBuilder(assets, '/', 'system.config.js', function( builder, sourceDir, destDir ) {
  builder.config({
    packages: {
      can: {
        map: {
          './util/util': './util/domless/domless'
        }
      }
    },
    meta: {
      jquery: {
        format: 'global',
        exports: 'jQuery',
        deps: [
          'can/util/vdom/vdom'
        ]
      }
    },
    map: {
      stache: 'can/view/stache/system'
    }
  });

  var dirName = url.parse(builder.loader.baseURL).pathname,
    paths = walkSync(dirName);

  return mapSeries(paths, function( pathname ) {
    if (path.extname(pathname) === '.stache') {
      return builder.trace('[' + pathname + '!]').then(function( tree ) {
        pathname = path.join(destDir, pathname + '.js');

        Object.keys(tree).map(function( key ) {
          mkdirp.sync(path.dirname(pathname));
          fs.writeFileSync(pathname, tree[key].source);
        });
      });
    }
  });
}));
Julian
@pYr0x
Mar 22 2016 08:33
oh ok
and how does your script tag look like?
Thomas Sieverding
@Bajix
Mar 22 2016 08:33
Just loads up and does auto render
I need to do a SFX - once that’s in place, it’ll be a single file load
Julian
@pYr0x
Mar 22 2016 08:34
and in that file there is no steal inside?
Thomas Sieverding
@Bajix
Mar 22 2016 08:34
correct
Julian
@pYr0x
Mar 22 2016 08:34
jspm is doing the loading stuff?
Thomas Sieverding
@Bajix
Mar 22 2016 08:34
SystemJS + JSPM
Night
Julian
@pYr0x
Mar 22 2016 08:35
is there a way do make a example app.. @cherifGsoul i look for a workflow
maybe we can adopt multiple workflows
.. in this connection... night
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 22 2016 08:52
tonight Im not available :/
Customer work @pYr0x
Jeroen Cornelissen
@jeroencornelissen
Mar 22 2016 09:02
@Bajix I can’t make the $insert event work
<h1 ($insert)="elinserted(@element)">{{label}}</h1>
var FormViewModel = can.Map.extend({
        define: {
            activeForm : {
                value : {}
            }
        },
        elinserted : function(el) {
            console.debug('elinserted', el);
        }
    });
Julian
@pYr0x
Mar 22 2016 09:09
@jeroencornelissen is it ($inserted)?
@cherifGsoul no problem ;)
Jeroen Cornelissen
@jeroencornelissen
Mar 22 2016 09:10
@pYr0x @Bajix it is $inserted, thx!
Julian
@pYr0x
Mar 22 2016 09:12
np ;)
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 22 2016 09:17
@pYr0x your electron app works?
Julian
@pYr0x
Mar 22 2016 09:20
yep
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 22 2016 09:20
cool
:+1:
Julian
@pYr0x
Mar 22 2016 09:21
you need https://github.com/donejs/donejs-vagrant because if you want to build a app for windows you need "wine"
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 22 2016 09:22
I use linux, is it ok? not a MS user :smile:
Julian
@pYr0x
Mar 22 2016 09:22
on windows you dont need "wine"
if you want build windows app with electron you need wine also for linux
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 22 2016 09:22
ok
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 22 2016 09:22
thank you
:wine_glass:
Julian
@pYr0x
Mar 22 2016 09:24
:)
you are welcome
Dovid Bleier
@dbleier
Mar 22 2016 12:57
@jeroencornelissen looks like your question/solution is something that will be beneficial to others. Would you please post the question and solution to forums.donejs.com in order to make it available to future googlers?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 22 2016 13:02
@dbleier or we can improve the docs with it cc @pYr0x
Jeroen Cornelissen
@jeroencornelissen
Mar 22 2016 13:03
@cherifGsoul @dbleier I also think these things should be in the docs
Also, it didn’t solve my problem, because stache “reuses” the element when it’s first inserted.
So the inserted event only gets triggered once, I’m more looking for a rendering-done event.
Dovid Bleier
@dbleier
Mar 22 2016 13:27
@jeroencornelissen @jeroencornelissen I agree we should add it to the docs, but there is also value in having it in the forums 1) docs don't get updated so quickly 2) forum based questions and answers very often give insights and understanding not readily apparent in the docs
for example how often have we found something explained on stack exchange that was not clear in the documentation?
Jeroen Cornelissen
@jeroencornelissen
Mar 22 2016 13:28
@dbleier true, I’ll post it on the forums
Dovid Bleier
@dbleier
Mar 22 2016 13:29
:+1:
@cherifGsoul is @pYr0x the address for canjs documentation?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 22 2016 13:36
@dbleier The documentation talks about inserted event in can.Componenthttps://canjs.com/docs/can.events.inserted.html
for the use case of @jeroencornelissen Im not sure what he means, but if he likes to listen to inserted event if the element already rendred I think it's not possible, a custom attribute or viewModel might be used to acheive the goal
Dovid Bleier
@dbleier
Mar 22 2016 13:38
@cherifGsoul the docs only discuss the inserted event in js, not how to reference in stache
anyway further support for what I said that the docs are not always the best place to find clarity on answers
what we really need is an updated event to fire whenever the component (or tag or whatever) is updated, not just inserted and removed
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 22 2016 13:41
any help to enhance the docs is welcome :)
Dovid Bleier
@dbleier
Mar 22 2016 13:41
what is the process for additions/updates to documentation?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 22 2016 13:41
@dbleier can make an example how tag can be updated? or you mean it's attributes?
Dovid Bleier
@dbleier
Mar 22 2016 13:42
attributes or content
for attributes and content I think is already documented
Dovid Bleier
@dbleier
Mar 22 2016 13:45
but isn't that what @jeroencornelissen is looking for?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 22 2016 13:47
for @jeroencornelissen as I understood his use case is after the element was redered, he likes to listen insertedevent
Jeroen Cornelissen
@jeroencornelissen
Mar 22 2016 13:48
@cherifGsoul yes, my stache template responds on a change of an attr of my VM.
I like to know when the template is done rendering.
Dovid Bleier
@dbleier
Mar 22 2016 13:48
but for each time the element is rerendered (what I meant by update), no?
Julian
@pYr0x
Mar 22 2016 13:48
tigger a custom event if you change the VM property
Jeroen Cornelissen
@jeroencornelissen
Mar 22 2016 13:48
I now use {myAttr} change event and setTimeout
Julian
@pYr0x
Mar 22 2016 13:49
and listen for that event
Dovid Bleier
@dbleier
Mar 22 2016 13:49
@pYr0x would you provide an example of what you mean?
Jeroen Cornelissen
@jeroencornelissen
Mar 22 2016 13:49
that would be useful
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 22 2016 13:49
@jeroencornelissen can you give a jsbin for your use case?
Jeroen Cornelissen
@jeroencornelissen
Mar 22 2016 13:50
I’ll try to set one up
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 22 2016 13:50
ok
@jeroencornelissen @dbleier since 2.3 we have https://canjs.com/docs/can.stache.expressions.html
also the can.Componenthas event is a can.Control object so what is written on https://canjs.com/docs/can.Control.html can be used
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 22 2016 14:12
@jeroencornelissen @dbleier to make things easier use can.Mapwith can.map.define plugin and write get or set to targeting attributes if you want to have custom behavior on it
Dovid Bleier
@dbleier
Mar 22 2016 14:21
I think the issue is what event is triggered when stache rerenders something
there is the ($change) event I suppose
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 22 2016 14:23
@dbleier when it should be fired?
Dovid Bleier
@dbleier
Mar 22 2016 14:23
he wants to know when stache completes rerender
Julian
@pYr0x
Mar 22 2016 14:30
what does he mean, with completes rendering?
did he gets ajax requestes?
i think we need a example
and then we can help
Dovid Bleier
@dbleier
Mar 22 2016 14:42
I think he means, that when a VM prop changes, it fires a stache rerender. He wants to know when stache has finished rerendering the template.
Jeroen Cornelissen
@jeroencornelissen
Mar 22 2016 14:47
This is a simplified version of the app we are working on.
http://jsbin.com/cohiqakajo/6/edit?html,js,output
If you click the “toggle form” button, the activeForm attr is updated. I want to know when the “my-form-template” stache file is done rendering
so basically what @dbleier says
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 22 2016 14:51
@jeroencornelissen can you see output?
ok I see it
Christopher Oliphant
@RALifeCoach
Mar 22 2016 15:05
I am having problems with a Map function. Is there any way to figure out where in the stache file it is being called from?
Julian
@pYr0x
Mar 22 2016 15:06
debug?
use debugger; in the map function
and use crhomes dev tools
Christopher Oliphant
@RALifeCoach
Mar 22 2016 15:07
I have a 250 line stache file with the function being called in several places
I want to know which of the places is causing problems as sometimes it works and sometimes it doesn't
Julian
@pYr0x
Mar 22 2016 15:08
...yes you have debug this...
Christopher Oliphant
@RALifeCoach
Mar 22 2016 15:08
how do I debug this?
Julian
@pYr0x
Mar 22 2016 15:08
use debugger; in the map function
Christopher Oliphant
@RALifeCoach
Mar 22 2016 15:08
I have done that
Julian
@pYr0x
Mar 22 2016 15:09
it sets a break point
in chrome
Christopher Oliphant
@RALifeCoach
Mar 22 2016 15:09
I have a breakpoint at the line
Julian
@pYr0x
Mar 22 2016 15:09
and now look at the stack
Christopher Oliphant
@RALifeCoach
Mar 22 2016 15:09
yes
what am I looking for?
Julian
@pYr0x
Mar 22 2016 15:10
where the call came from
Christopher Oliphant
@RALifeCoach
Mar 22 2016 15:10
somewhere in stache
I need to know where in stache
which line in the stache file?
Julian
@pYr0x
Mar 22 2016 15:11
i think to find that outm, you have to transpile the stache file
stache is parsed in runtime...
if you transpile it, an array of properties is the result
Christopher Oliphant
@RALifeCoach
Mar 22 2016 15:12
is there an easy way to transpile it?
then run the transpiled code?
Julian
@pYr0x
Mar 22 2016 15:12
make a build with stealjs
Christopher Oliphant
@RALifeCoach
Mar 22 2016 15:13
I am not using stealjs
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 22 2016 15:13
can-compile
Christopher Oliphant
@RALifeCoach
Mar 22 2016 15:13
thanks
Julian
@pYr0x
Mar 22 2016 15:14
did this work for stache`also?
it says mustache...
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 22 2016 15:15
it should works readme file has a stache example
Kevin Phillips
@phillipskevin
Mar 22 2016 15:18
@RALifeCoach would it be easier to pass a unique argument for each place its being called in your stache file?
or comment them out one-by-one
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 22 2016 15:21
@jeroencornelissen you can just listen to the app state changes for your case, or you have specific reason why you have to know when template is redered?
Jeroen Cornelissen
@jeroencornelissen
Mar 22 2016 15:26
@cherifGsoul what do you mean with app state changes?
I needed to know when the template is rendered because I wanted to focus the first form element.
Christopher Oliphant
@RALifeCoach
Mar 22 2016 15:26
@phillipskevin - execllent idea - the can.compile wasn’t useful
Christopher Oliphant
@RALifeCoach
Mar 22 2016 15:35
Now I am really confused
I have a simple method on my Map
isActive: function (ctr) {
            return this.playerRow.player.status.toLowerCase() === 'active';
        },
The first time it is called, all is well. The second time it is called, the value of this.playerRow has changed. That is while parsing the same stache file.
The first call {{^if isActive('1')}} and the second call <a class="name {{#if isActive('2')}}expansion{{/if}}”
Kevin Phillips
@phillipskevin
Mar 22 2016 15:38
is playerRow an attribute on your map?
Christopher Oliphant
@RALifeCoach
Mar 22 2016 15:39
yes
Kevin Phillips
@phillipskevin
Mar 22 2016 15:39
you probably want to use .attr(‘playerRow…’) then
Christopher Oliphant
@RALifeCoach
Mar 22 2016 15:40
why does it work once, but not the second time?
Kevin Phillips
@phillipskevin
Mar 22 2016 15:40
I’m not really sure what you mean
it sounds like playerRow is being set some time while your template is rendering
Julian
@pYr0x
Mar 22 2016 15:41
only .attr() let can.compute know about accesing the property
Kevin Phillips
@phillipskevin
Mar 22 2016 15:41
if you use .attr() it will render the section with ‘1’ then render the section with ‘2’ then re-render the section with ‘1’ again because playerRow changed
Christopher Oliphant
@RALifeCoach
Mar 22 2016 15:43
I will change them all to attrs and keep you posted
Kevin Phillips
@phillipskevin
Mar 22 2016 15:43
ok
you can do this.attr(‘playerRow.player.status’)
Christopher Oliphant
@RALifeCoach
Mar 22 2016 15:46
the second time this.playerRow.attr('player’) gives <not available>
Kevin Phillips
@phillipskevin
Mar 22 2016 15:49
should be this.attr(‘playerRow.player’)
Christopher Oliphant
@RALifeCoach
Mar 22 2016 15:50
sorry, I thought either would work - I will make the change
Kevin Phillips
@phillipskevin
Mar 22 2016 15:52
the first will only trigger a render if player changes
but if playerRow changes it won't
Christopher Oliphant
@RALifeCoach
Mar 22 2016 15:53
I don’t want either player or player row to change
I am simply trying at access them to test for a value
Kevin Phillips
@phillipskevin
Mar 22 2016 15:55
I know you don’t want them to change
something sets playerRow
before that, playerRow will be undefined
so in order for your template to render when playerRow changes from undefined to the correct value, you need to listen to when playerRow changes
Christopher Oliphant
@RALifeCoach
Mar 22 2016 15:56
are you suggesting I create an event on playerRow?
Kevin Phillips
@phillipskevin
Mar 22 2016 15:56
no
using .attr() sets up a listener internally
so that stache knows to recompute your isActive function
and re-render
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 22 2016 16:27
@jeroencornelissen my-form should be removed and inserted everytime activeForm change
Christopher Oliphant
@RALifeCoach
Mar 22 2016 17:36
@phillipskevin I made the change you requested (after being pulled away to work on two other priorities)
isActive is getting called again with ctr = 1
therefore playerRow is getting altered - the question is where?
is the stache file parsed and populated on the main thread?
Kevin Phillips
@phillipskevin
Mar 22 2016 17:40
yes
can you just bind on playerRow and look at the stack trace to see what is changing it?
Christopher Oliphant
@RALifeCoach
Mar 22 2016 17:44
can I bind in the Map events: { playerRow: function () […
or does it need to be on the component?
Kevin Phillips
@phillipskevin
Mar 22 2016 17:45
on the map, you can add an init
then do
  init: function() {
    this.bind(‘playerRow’, function() { … });
  }
Christopher Oliphant
@RALifeCoach
Mar 22 2016 17:46
BTW there is no Map.init in the documentation
thanks
Kevin Phillips
@phillipskevin
Mar 22 2016 17:47
Map extends Construct
so init is on can.Construct
Christopher Oliphant
@RALifeCoach
Mar 22 2016 17:48
that is very true, and it would have been nice to see it - especially with that example you just gave me
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 22 2016 17:49
@jeroencornelissen look at Tabs example you follow the same pattern to make it works https://canjs.com/docs/can.Component.html
Christopher Oliphant
@RALifeCoach
Mar 22 2016 17:52
playerRow is being updated during the stache parsing and populating
Kevin Phillips
@phillipskevin
Mar 22 2016 17:53
ok
you’re not expecting that?
Christopher Oliphant
@RALifeCoach
Mar 22 2016 17:53
No
Kevin Phillips
@phillipskevin
Mar 22 2016 17:53
how is playerRow defined?
Christopher Oliphant
@RALifeCoach
Mar 22 2016 17:56
data = { playerRow: { …} }; var map = new mapBase(data);
This message was deleted
that is then inserted into the compoent
var template = can.stache('<player-row id="player-row-' + this.pid + '"></player-row>');
this.container.append(template(map));
Christopher Oliphant
@RALifeCoach
Mar 22 2016 18:01
one point - I begin my stache file with {{#with playerRow}} so that I don’t have to qualify all the references to properties within playerRow
Kevin Phillips
@phillipskevin
Mar 22 2016 18:22
does mapBase have a playerRow property?
Christopher Oliphant
@RALifeCoach
Mar 22 2016 18:52
@phillipskevin when I remove the {{#with playerRow}} everything works
well, most things work
Kevin Phillips
@phillipskevin
Mar 22 2016 19:16
ok, I’m not sure why that would be
if you’re able to reproduce the issue in a jsbin I can take a look