These are chat archives for canjs/canjs

4th
Aug 2016
Kevin Phillips
@phillipskevin
Aug 04 2016 00:14
This message was deleted
cc @halcyonandon
Gerard Finnerty
@halcyonandon
Aug 04 2016 01:30
@phillipskevin Thanks for sharing this. For the checkboxes, why {{#if selectedValuesContains(.)}} to toggle checked attr instead of (($checked))="selectedValuesContains(.)"? Just curious if you ran into any issues using $checked
Kevin Phillips
@phillipskevin
Aug 04 2016 01:31
the message I deleted said you could probably use {$checked}="selectedValuesContains(.)”, but I’m not sure if that will work
Gerard Finnerty
@halcyonandon
Aug 04 2016 01:31
@phillipskevin ah ok cool
Kevin Phillips
@phillipskevin
Aug 04 2016 01:31
it should
it looks like checked is a boolean attribute
so yeah, try that out
that would be cleaner
Gerard Finnerty
@halcyonandon
Aug 04 2016 01:32
@phillipskevin Tried and it seems to work as expected so far
Thomas Sieverding
@Bajix
Aug 04 2016 01:32
define -> type: ‘boolean’ ensures it’s always bool
Kevin Phillips
@phillipskevin
Aug 04 2016 01:33
I mean the actual html attribute
Thomas Sieverding
@Bajix
Aug 04 2016 01:33
At least, I’ve always done that in conjunction w/ ($checked)
Ah
Kevin Phillips
@phillipskevin
Aug 04 2016 01:33
<input type="checkbox" checked … vs <input type=“checkbox” checked=“checked” …> which I think I have in the example
Thomas Sieverding
@Bajix
Aug 04 2016 01:35
{{#is foo two'}}
  <input type="checkbox" ($checked)="attr('foo', 'one')"></input>
{{else}}
  <input type="checkbox" ($checked)="attr('foo', 'two')"></input>
{{/is}}
I think you should be able to do something like that as well
Hammer style
Kevin Phillips
@phillipskevin
Aug 04 2016 01:35
wouldn’t that be more like radio buttons?
you wouldn’t be able to check them both
Thomas Sieverding
@Bajix
Aug 04 2016 01:36
I mean as an alternative to can-value-true/false
It’s a lazy example… but that’s what I was saying earlier about using call expressions
Not a great use case
Kevin Phillips
@phillipskevin
Aug 04 2016 01:37
yeah, I didn’t scroll back through the whole conversation
I’m not sure exactly what the use case is
Thomas Sieverding
@Bajix
Aug 04 2016 01:38
Yea..welp
Christopher Oliphant
@RALifeCoach
Aug 04 2016 10:10
@Bajix Your response is useful, but doesn’t address the issue of directing the API calls to a port.
Andrei Balmus
@abalmush
Aug 04 2016 15:18
+1 for the updating documentation, especcially for bindings (radio buttons, checkboxes and so on)
with 2.3 it works only if I use can-value (radio)
Gerard Finnerty
@halcyonandon
Aug 04 2016 18:36
https://www.npmjs.com/package/can-vdom What is a 'browser-lite environment'? Is this basically a headless browser for running unit tests and such or is this 'virtual dom' in the same sense as Facebook React?
Matthew Phillips
@matthewp
Aug 04 2016 19:55
It's a virtual dom for canjs apps, for running then in Node.js, for server-side rendering primarily
Gerard Finnerty
@halcyonandon
Aug 04 2016 20:29
@matthewp oh, that's a really confusing because virtual dom implies the same technique React, Aura and others use to simplify the dom, making it more lightweight, then running a diff against the actual dom to reflect changes... I've never heard 'virtual dom' used to describe server-side rendering before...
Christopher Oliphant
@RALifeCoach
Aug 04 2016 20:57
Can someone help me with superMap?
Thomas Sieverding
@Bajix
Aug 04 2016 21:37
@RALifeCoach url.resource can have a port in it
Christopher Oliphant
@RALifeCoach
Aug 04 2016 21:38
That’s good to know
I just changed the get call argument from {user: ‘me’} to {id: ‘me’} and things are working better
before then it was ignoring the URL
Thomas Sieverding
@Bajix
Aug 04 2016 21:39
@halcyonandon By virtual DOM, @matthewp is referring to a the fake DOM itself, not how it’s rendered. CanJS uses change propagation to do rendering
Christopher Oliphant
@RALifeCoach
Aug 04 2016 21:47

My api call is working now. So in my map I have:

export const ViewModel = Map.extend({
    define: {
        goals: {
            value() {
                return GoalData.findOne({id: 'me'});
            }
        }
    }
});

However, stache doesn’t see the returned data when attempting to use the data from the findOne.

Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 04 2016 21:52
@RALifeCoach you have a deferred object
Christopher Oliphant
@RALifeCoach
Aug 04 2016 21:52
That makes sense. What is the better way?
(I saw that in the documentation somewhere.)
Thomas Sieverding
@Bajix
Aug 04 2016 21:53
@RALifeCoach Async getter
Of course, deferred are also observable
Christopher Oliphant
@RALifeCoach
Aug 04 2016 21:54
Suggestions?
Thomas Sieverding
@Bajix
Aug 04 2016 21:54
You should really just use can-connect/can/tag/
{{#if %root._id}}
  <access-model get="{_id=%root._id}" {^value}="./access">
  {{#isPending}}<loader/>{{/isPending}}
  {{#isRejected}}
    <route-url screen="access" action="index"/>
  {{/isRejected}}
  </access-model>
{{/if}}
Something like that
  define: {
    access: {
      value: Object,
      Type: Access,
      get: function( access ) {
        var app = can.route.attr('app');

        if (access && access.isNew()) {
          access.attr('app', app);
        }

        return access;
      }
    }
  },
Gerard Finnerty
@halcyonandon
Aug 04 2016 22:02
@Bajix I think I understand, but I guess my point is the general dev community associates virtual dom with the actual rendering, so it is confusing to repurpose a concept name that already exists (virtual dom) to describe another concept that already exists (server-side rendering or pre-rendering)... even though canJS uses change propagation, it still isn't virtual dom as it does not provide element creation, diff computation or patch operations for more efficient re-rendering of the dom when those changes propagate... unless I'm missing something, which I might be, haha
Thomas Sieverding
@Bajix
Aug 04 2016 22:07
Virtual DOM is just a fake DOM
A VDOM doesn’t imply anything about rendering
What you’re talking about are use cases for a VDOM, not the VDOM itself
Christopher Oliphant
@RALifeCoach
Aug 04 2016 22:12

@Bajix I am working with your suggestion

                {{#eq page 'goals'}}
                    <can-import from="src/goals/">
                        <goals-model get="{id='me'}" {^value}="./access">
                            {{#if isPending}}
                                Loading...
                            {{else}}
                                <otw-goals/>
                            {{/if}}
                        </goals-model>
                    </can-import>
                {{else}}

However, it isn’t making the call to the API.

Thomas Sieverding
@Bajix
Aug 04 2016 22:13
Did you use can-connect/can/tag/ to register that component?
var connection = superMap({
  url: {
    resource: config.hosts.api + '/users'
  },
  idProp: '_id',
  Map: User,
  List: User.List,
  name: 'user'
});

tag('user-model', connection);
Christopher Oliphant
@RALifeCoach
Aug 04 2016 22:16
export const GoalData = can.Map.extend({
    define: {
        goals: {
            Map: GoalsData
        },
        version: {
            type: 'number'
        },
        timestamp: {
            type: 'string'
        }
    }
});

export const GoalDataList = can.List.extend({
    Map: GoalData
});

export const goalsConnection = superMap({
    url: 'http://127.0.0.1:8787/goals',
    idProp: 'id',
    Map: GoalData,
    List: GoalDataList,
    name: 'goals'
});

tag('goals-model', goalsConnection);

export default GoalData;
as generated by donejs
Thomas Sieverding
@Bajix
Aug 04 2016 22:17
Does the tag make a request or display content?
Christopher Oliphant
@RALifeCoach
Aug 04 2016 22:20
the <otw-goals/> is the component name - it doesn’t make a request
Thomas Sieverding
@Bajix
Aug 04 2016 22:25
Your can-import might be wrong
I’d make sure everything is hooked up properly before proceeding
Christopher Oliphant
@RALifeCoach
Aug 04 2016 22:27
I removed the can-import. I am not getting any errors as it tries to access otw-goals. And I can see the call being made to the API.
I also see the page being displayed - just without data.
I threw a console.log statement into the Component inserted event.
the viewModel.attr(‘goals’) is undefined
Thomas Sieverding
@Bajix
Aug 04 2016 22:28
Well you’re not crossbinding to goals
So maybe {^value}=“./goals"
Or cross-bind on otw-goals
Though it would be goal if you’re using get, not goals
Christopher Oliphant
@RALifeCoach
Aug 04 2016 22:30
I just tried {^value=“./goals”} no change
I also tried ./goal
Thomas Sieverding
@Bajix
Aug 04 2016 22:30
That binds to the current scope
IE Not otw-goals
Christopher Oliphant
@RALifeCoach
Aug 04 2016 22:32
I’m not sure what that last couple of statements meant
Should I put the reference to goals-model in otw-goals?
Thomas Sieverding
@Bajix
Aug 04 2016 22:34
<goals-model get="{id='me'}" {^value}="*goal"/>
<otw-goals {goal}="*goal"/>
Christopher Oliphant
@RALifeCoach
Aug 04 2016 22:36
That makes sense - unfortunately it didn’t work
I tried goal and goals
Thomas Sieverding
@Bajix
Aug 04 2016 22:36
You have other issues then
Christopher Oliphant
@RALifeCoach
Aug 04 2016 22:37
I have many issues. However, I need pointers to help me with this one.
Is there some place to see what is getting returned?
A breakpoint I can set somewhere?
Thomas Sieverding
@Bajix
Aug 04 2016 22:39
Sure; in can-connect/can/tag/
Christopher Oliphant
@RALifeCoach
Aug 04 2016 22:46
I am looking at addToPageData. the code attempts to set ‘root’. It then checks that ‘root’ and 'root.pageData’ are defined. ‘root’ is ‘root.pageData’ isn’t.
(That’s in can-compute/can/tag)
Christopher Oliphant
@RALifeCoach
Aug 04 2016 22:53
Suggestions?????
Thomas Sieverding
@Bajix
Aug 04 2016 22:55
Setup fixtures, make sure you can do findOne/findAll and return data from said fixtures, then create a demo.html page that loads in the fixtures and loads up your components
Setup tests etc
Pro tip: You can use done-autorender within html files
Christopher Oliphant
@RALifeCoach
Aug 04 2016 22:56
I know that the API is being called. I log that in the API. I can see the data being returned from the API, in the networks section of Chrome Developer tools.
Thomas Sieverding
@Bajix
Aug 04 2016 22:56
<script src="../../../node_modules/steal/steal.js" main="cms/access-crud/demo.html!done-autorender"></script>
Go through the exercise of setting up tests/demos that load from fixtures
It’s worth improving own's methodology
Christopher Oliphant
@RALifeCoach
Aug 04 2016 22:59
The problem isn’t getting the data. The problem is passing the data to the page. I know the page is okay because I first tested with static data in my viewModel.
BTW - I just noticed that the data is getting passed to the page in the query string
This was supposed to be a quick and easy app, for my personal use. DoneJS would wire it all together and presto! All done. Instead it has been 3 days of frustration.
Christopher Oliphant
@RALifeCoach
Aug 04 2016 23:06
I think when I’m done, if I ever get it working, I’ll write a blog about how this stuff actually works. I can’t be the only one getting frustrated by this.
I suspect most others just give up and move on to another framework.
Silence.
Leath Cooper
@IcculusC
Aug 04 2016 23:17
hey guys, is canjs 3.0 a valid topic in here?
Thomas Sieverding
@Bajix
Aug 04 2016 23:21
@IcculusC Yes
Christopher Oliphant
@RALifeCoach
Aug 04 2016 23:21
Is getting CanJS 2.3 to work a valid topic here?
Thomas Sieverding
@Bajix
Aug 04 2016 23:21
Of course it is
Your problems don’t really seem like framework problems, but rather implementation struggles
Christopher Oliphant
@RALifeCoach
Aug 04 2016 23:23
Fair enough. But why is it so hard to wire this stuff together?
Thomas Sieverding
@Bajix
Aug 04 2016 23:23
Well you’re working with a lot of moving parts here
Christopher Oliphant
@RALifeCoach
Aug 04 2016 23:24
Any idea why my data is being passed in the query string?
Thomas Sieverding
@Bajix
Aug 04 2016 23:24
%root === can.route.data
Christopher Oliphant
@RALifeCoach
Aug 04 2016 23:24
These moving parts are the basic elements to any modern web page.
Thomas Sieverding
@Bajix
Aug 04 2016 23:25
The App ViewModel is the constructure used in can.route
Leath Cooper
@IcculusC
Aug 04 2016 23:25
@Bajix did the component constructor change, I can't seem to access the members of a map passed into the component definition as a viewmodel, however if I put an object that I would normally use to extend the Map (and use as a view model) it works
Thomas Sieverding
@Bajix
Aug 04 2016 23:26
You might be inadvertently cross-binding to your can.route Map, which would be your top level scope
Christopher Oliphant
@RALifeCoach
Aug 04 2016 23:26
I don’t know what that means. I need examples of working code. The docs hide all this.
How would I know if I am doing that?
I am using the code you suggested.
Thomas Sieverding
@Bajix
Aug 04 2016 23:27
can.route.attr is globally available
So you could check
The code I gave you earlier, if it was in your main index.stache, would update can.route.attr
@IcculusC Snippet pl0x
Christopher Oliphant
@RALifeCoach
Aug 04 2016 23:28
can.route.attr is a function
So where should I put it?
Thomas Sieverding
@Bajix
Aug 04 2016 23:28
can.route.data is a can.Map instance. can.route.attr is a proxy of can.route.data.attr
can.route.data === new App();
    <can-import from="../app" export-as="viewModel" />
`
The above line sets that up
Christopher Oliphant
@RALifeCoach
Aug 04 2016 23:30
I have a line similar to that - as created by DoneJS
<can-import from="otw/app" export-as="viewModel" />
Thomas Sieverding
@Bajix
Aug 04 2016 23:30
If you want to see a done app, I’ll add you to a private repo so long as you agree to keep things private etc
Yes that would setup otw/app as your can.route.data can.Map instance
Gerard Finnerty
@halcyonandon
Aug 04 2016 23:31
@Bajix I understand your point, but a server-side dom is still just the actual dom rendered in a different environment, unless it is actually a simplified or abstracted dom. Semantics aside, I was excited to think that canJS was going to start providing an in-memory dom abstraction because the readme is calling a pre-rendering engine 'virtual dom' without elaborating on how canJS defines a virtual dom in the first place... obviously I was disappointed... if https://github.com/canjs/can-vdom doesn't do a better job of explaining itself, its going to confuse others for sure.... also confusing phrasing like this "With StealJS, you can import this module directly in a template that is autorendered:" ...but modules import templates, not the other way around, so what does that even mean? The example doesn't show any templates, just how to write a basic import statement. I found this after checking out the new documentation site @justinbmeyer shared. Confusing and outdated docs have been the biggest challenge I've faced advocating canJS for the last 2 years. I'm only trying to provide some feedback on confusing documentation discovered through the new doc site. I understand this is a work-in-progress, so all the more reason to share this feedback, right?
Thomas Sieverding
@Bajix
Aug 04 2016 23:31
Which would coerce all properties into strings
Christopher Oliphant
@RALifeCoach
Aug 04 2016 23:31
Hey, I’m a life coach, amongst other things. I respect the right to privacy for all.
Thomas Sieverding
@Bajix
Aug 04 2016 23:31
K
Christopher Oliphant
@RALifeCoach
Aug 04 2016 23:31
So yes, I will keep it private.
Leath Cooper
@IcculusC
Aug 04 2016 23:32

component

let SignUpViewModel = DefineMap.extend({
    user: {
        username: ""
    }
});

Component.extend({
    tag: "signup-form",
    template: SignUp,
    viewModel: SignUpViewModel
});

then in a stache(imported as SignUp above)

{{user.username}}

receive a warning saying "helper or key not found 'user.username'" and the binding doesn't work

in 2.3 that worked perfectly
also the actual code is more like this, but when passing an object it works perfectly(rather than the existing map constructor)
<input type="text" {($value)}="user.username">
{{user.username}}
Thomas Sieverding
@Bajix
Aug 04 2016 23:37
@halcyonandon Again, vDOM is just a fake DOM that acts the same way as the real DOM. It can be used anywhere, even for non-CanJS purposes. As for your other point, templates can in fact import modules, and there are a LOT of really good use cases for this
The point of vDOM is simply to mirror the behavior of a real DOM for SSR purposes. Actually doing optimized rendering is an entirely different thing
@IcculusC You should use value/Type to accomplish what you’re trying to do
Leath Cooper
@IcculusC
Aug 04 2016 23:40
all righty
thank ya
Thomas Sieverding
@Bajix
Aug 04 2016 23:43
@halcyonandon Here’re some useful cases in which it would make sense to load modules into templates: CSS could be added as a dependency to be loaded with the done-css plugin; if you load components in, you can use the respective tag; you can load helper; you could load in can/route/pushstate/ as a means to only enable push state within your main index.stache
The biggest advantage of being able to load these dependencies within in stache files is that you can now substitute templates using configuration without compromising your dependency tree
Your components then wouldn’t require sub-components, but rather they’d require templates and individual templates would build their own dependency graph
Thomas Sieverding
@Bajix
Aug 04 2016 23:49
It also makes it a lot easier to progressively load SPA’s, as you can make conditional imports that lazy load, but can still be traced in order to do progressive loading & optimized bundling