These are chat archives for canjs/canjs

13th
Mar 2016
Chris
@chrischrischris
Mar 13 2016 06:28
New question: I have a Model that pulls data from a rest api using findall, and also have a define property defined in the model instance that is a computed property from the rest data. I want to pass this define property to sub-component, but the value is never passed (using {subComponentProp}="definedProperty". I can see the correct value in the parent component - and in the console the property is visible via attr('definedProperty'), but not via .definedProperty. Any ideas how I can pass this value to the subcomponent?
Thomas Sieverding
@Bajix
Mar 13 2016 06:29
Markup?
Chris
@chrischrischris
Mar 13 2016 06:30
@Bajix - is that in response to my question? I don't follow what you mean by Markup?
Thomas Sieverding
@Bajix
Mar 13 2016 06:30
Oh so you need to use .attr to read computed values
Chris
@chrischrischris
Mar 13 2016 06:31
yes and that works, but I can't figure out how to pass that value in the stache template
Thomas Sieverding
@Bajix
Mar 13 2016 06:31
{title}=“page.title"
That’ll set viewModel.title whenever page.title is changed
Oh you probably have a capitalization issue
The attribute name needs to be lowercase
{sub-component-prop}=“myModel.computedProperty"
kebab case -> camel case
kabab case = snake case w/ dashes instead of underscores
Chris
@chrischrischris
Mar 13 2016 06:36
Code Exerpt:
{{#each articles}}
    <p>This works: {{previewImgURL}}</p>
    <!-- passing in previewImgURL doesn't work below -->
    <article-tile {imageURL}="previewImgURL" {articleTitle}="title" />
{{/each}}
Thomas Sieverding
@Bajix
Mar 13 2016 06:37
That’s incorrect
{{#each articles}}
    <p>This works: {{previewImgURL}}</p>
    <!-- passing in previewImgURL doesn't work below -->
    <article-tile {image-url}="previewImgURL" {article-title}="title" />
{{/each}}
Chris
@chrischrischris
Mar 13 2016 06:38
ok, i'll try - but articleTitle works (2nd param)
Thomas Sieverding
@Bajix
Mar 13 2016 06:38
imageURL isn’t a good property name, as it can’t be converted sanely between different casing
You should do imageUrl instead so that your attribute would be {image-url}=“{post.imageUrl}"
Possibly, I hadn’t played around with type sensitivity w/ the new binding syntax
AFAIK attribute names shouldn’t contain capitalized letters
Chris
@chrischrischris
Mar 13 2016 06:40
ok yep - thanks so much! I didn't see anything about casing / kebab casing in the docs anywhere
but that was the issue. Been banging my head on the keyboard for a while so I really appreciate the help
Thomas Sieverding
@Bajix
Mar 13 2016 06:42
Yea, I believe it’s mentioned in there somewhere, but not sure where
All of their examples use kebab casing at the very least
Chris
@chrischrischris
Mar 13 2016 06:43
yeah - i think the fact that articleTitle was working for me made it that much harder to suspect that
Thomas Sieverding
@Bajix
Mar 13 2016 06:44
Yea, and it’s only the attribute name that’s type sensitive
Oh they probably do that because attribute names are case insensitive, so FooBar===foobar
Chris
@chrischrischris
Mar 13 2016 06:48
ah ok, that makes sense
Viktor Busko
@Lighttree
Mar 13 2016 13:36

https://canjs.com/docs/can.view.bindings.twoWay.html

Someone know why can throw warning on this page ? (in console)
WARN: can/view/stache/mustache_core.js: Unable to find key or helper "plateName". Because I have same warnings in my code and can't find the reason. There is also another case when I have different Issue with WARN: can/view/scanner.js: No custom element found for my-parent-component-tagMaybe some updates in Can ?

Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 13 2016 14:38
@Lighttree you use can.jquery.dev.js
if so just use can.jquery.js
for the first check if you have plateName in your viewModeland the later check the component tag existance
Justin Meyer
@justinbmeyer
Mar 13 2016 19:39
@Lighttree are you using Mustache on purpose?
you should use stache if you can
The reason you'll see those warnings are because:
  1. you have something like {{plateName}}, but there's no object with a plateName property defined in the scope. This can be ok. It's just a warning. In those cases, it's faster if you do something like {{./plateName}}. Giving a hint on where to look speeds up the bindings.
2. At the time of running the template, there's no my-parent-component-tag component defined.
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 13 2016 19:42
@justinbmeyer How we can know that mustacheis used here?
Justin Meyer
@justinbmeyer
Mar 13 2016 19:42
can/view/scanner is not used by stache.
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 13 2016 19:43
ok thank you