These are chat archives for canjs/canjs

1st
Jun 2017
Matthew Phillips
@matthewp
Jun 01 2017 13:06
Gregg Roemhildt
@roemhildtg
Jun 01 2017 15:21
@gsmeets I'm using pubsub-js in a canjs app. Just for simple message publishing though, to notify user of async success and failure events.
Gregg Roemhildt
@roemhildtg
Jun 01 2017 15:30
I'm running into an error involving can-stache-bindings and can-view-model.
can-stache-bindings data is calling canViewModel on an element, and for some reason that element has a .length property, which throws an error in can-view-model
Its happening in a stache template where a select dropdown has a two way binding like this: {($value)}="value"
Brad Momberger
@bmomberger-bitovi
Jun 01 2017 15:46
Are you using can-jquery/legacy?
Gregg Roemhildt
@roemhildtg
Jun 01 2017 15:48
Nope, I mean jquery is used in various places for ajax, but not can-jquery
Brad Momberger
@bmomberger-bitovi
Jun 01 2017 15:52
Hm.. You're right, it looks like can-view-model does an isArrayLike test on the element and unboxes it to the 0-index if so.
Should file a bug on that.
Trying to think of a workaround until we fix that, but the best I can think of is to set the property "0" on the element to point back to itself.
What kind of element is it?
Gregg Roemhildt
@roemhildtg
Jun 01 2017 15:57
Its a <select> element. But its burried in a component structure. Its weird because if I set a break point there, this is the only element that actually has a length property. I don't think its typical to have an element with a .length prop...
image.png
Brad Momberger
@bmomberger-bitovi
Jun 01 2017 15:58
May we see your tag HTML that creates that select?
(stache bindings included)
Gregg Roemhildt
@roemhildtg
Jun 01 2017 15:59
<select {($value)}="value" class="form-select form-control" name="{{properties.name}}">
    {{#each properties.options}}
        <option value="{{value}}">{{label}}</option>
    {{/each}}
</select>
Brad Momberger
@bmomberger-bitovi
Jun 01 2017 16:06
I can definitely replicate this result in a JSBin. https://jsbin.com/jiqegoxudi/edit?html,js,console,output
Let me see if I can figure out where it's happening.
Gregg Roemhildt
@roemhildtg
Jun 01 2017 16:08
hm, yes the tricky part
Brad Momberger
@bmomberger-bitovi
Jun 01 2017 16:12
It's not us doing this; it seems like select elements always have a numeric length.
(equal to the number of options)
So I think the safest thing to do is to check in canViewModel whether el is an instance of Node and short-circuit the arraylike test.
Gregg Roemhildt
@roemhildtg
Jun 01 2017 16:15
Mmhm that makes sense
Brad Momberger
@bmomberger-bitovi
Jun 01 2017 16:15
Though, could you paste in a stack trace and the conditions where it throws? I am not seeing errors thrown in the JSBin when rendering or changing the select value
Gregg Roemhildt
@roemhildtg
Jun 01 2017 16:16
Its quite a large stack trace, I'll make a pastebin
You have to call canViewModel on that element. Then it throws the error
Although I'm not calling canViewModel directly, can-stache-bindings does in the data method
Brad Momberger
@bmomberger-bitovi
Jun 01 2017 16:21
Just FYI, it should be lastElementChild, as lastChild is a text node.
A-ha! I see what happened here. This is something that broke in 3.2.0 because we added support for jQueries.
There you go. You can downgrade to can-view-model 3.1.3 which doesn't do array-like or string selector checks until we get the fix in.
Gregg Roemhildt
@roemhildtg
Jun 01 2017 16:24
Sweet!
Thanks for taking a look, as always :smile:
Brad Momberger
@bmomberger-bitovi
Jun 01 2017 16:24
you're welcome. I'll write up an issue in Github for this as soon as I put together a JSBin not using the global dist.
Brad Momberger
@bmomberger-bitovi
Jun 01 2017 16:33
The other thing I noticed is, this only breaks if you don't have any options in your select.
Gregg Roemhildt
@roemhildtg
Jun 01 2017 16:38
That's something to look into...not sure why my options are empty. It must be just initially, they eventually get populated :smile:
Brad Momberger
@bmomberger-bitovi
Jun 01 2017 16:44
But anyway, canjs/can-view-model#31 is up now. I'll see if someone else wants to take it on or comment