These are chat archives for canjs/canjs

9th
Jun 2015
opolyo01
@opolyo01
Jun 09 2015 01:18
@alexisabril I just usually have some _.map somewhere in controller code that being passed to the template. It is probably better to abstract in the UI model class like you do.
Well, I am currently stuck with another issue that might not be can.js related, but part of can.js application that uses clientState
$.extend(true, {}, this.constructor.defaults, overrides)
jquery.js:300 Uncaught RangeError: Maximum call stack size exceeded
at Function.jQuery.extend.type (http://localhost:8126/bower_components/jquery/dist/jquery.js:300:16)
Has anyone ever had this issue? I simply extending two objects.. overrides has a property of clientState that is pretty big in size for some states
David Luecke
@daffl
Jun 09 2015 02:46
@opolyo01 Could it be that you have a circular reference in your object tree? jQuery's deepExtend might not be able to deal with that.
Chris Gomez
@akagomez
Jun 09 2015 03:36
@alexisabril Does serialize: false not handle that case? Or am I misunderstanding the problem?
opolyo01
@opolyo01
Jun 09 2015 04:34
@daffl Yeah, it is. If I try to do JSON.stringify on it, it throws circular reference error. How do you deal with such issues? I am thinking to simply delete properties that cause circular reference, and update the code that relies on them.
avg6003
@avg6003
Jun 09 2015 04:39
This message was deleted
This message was deleted
avg6003
@avg6003
Jun 09 2015 04:45
can anyone tell me how to give fade effect on loading template? Here is my code:
'define(['can','jquery','jqueryui'], function(can,$) {
var PopUpController = can.Control.extend({
defaults: {
view: 'views/signup.hbs'
}
}, {
init: function(element, options) {
$('#popup').fadeIn('slow',function(element){
element.html(can.view(options.view, {}));
});
$('.content').click(function(){
$('#popup').fadeOut('slow');
})
},
})
return PopUpController;
})`
fadeOut is working but fadeIn isn't
I am new here sorry if there is some typo or formatiing!!
Nikolay Nadorichev
@Luanre
Jun 09 2015 13:22
@DipeshRaichana you've inserted can.Control after fadeIn so jQuery can't animate unexisting DOM element
Alexis Abril
@alexisabril
Jun 09 2015 16:03
@akagomez It definitely does and you would need to do that whether the property is on the map itself or on some inheriting map. However, if you have a large model with a lot of properties that are specific to a component’s view, those properties don’t need to be on the model itself. If that model is used in another component, with it’s own set of view related properties(isChecked, isHighlighted, isEditing, etc), the model itself gets polluted with arbitrary data.
Chris Gomez
@akagomez
Jun 09 2015 16:04
@alexisabril I totally get you now. But I’m confused why those properties wouldn’t be on the ViewModel.
Instead of the Model.
Alexis Abril
@alexisabril
Jun 09 2015 16:07

they would be on a viewmodel, just not the component’s necessarily. imagine you have a user model and your component has a user.list. user.isSelected could be some property you want to set.

In your view, you’d probably have something like:

{{#each users}}
<input type=“checkbox” can-value=“{isSelected}”/>
{{/each}}

isSelected would be convenient at some lower level than the component viewmodel itself, but not necessarily all the way down to the model.

Chris Gomez
@akagomez
Jun 09 2015 16:11
I see. Just for fun, I think the way I’d handle that is to have a list of user models (users), and a list of selected users (selectedUsers). isSelected would be a helper that checks for the current user in the selectedUsers list.
Matthew Phillips
@matthewp
Jun 09 2015 16:13
@alexisabril I think you want a component for each user in this case
Chris Gomez
@akagomez
Jun 09 2015 16:14
Ah! +1 @matthewp
Matthew Phillips
@matthewp
Jun 09 2015 16:14
or you could (this might be what you said) have a viewmodel that extends User
I remember us having this issue with sams
@Alfredo-Delgado i don't remember how we resolved that
probably with sub-components
Alexis Abril
@alexisabril
Jun 09 2015 16:15
@matthewp yep, that was my thought as well
a vm that extends user
a component for each user would accomplish the same goal in this scenario
I think a vm that extends user would be the elegant solution, provided we have an inheritable define plugin
Chris Gomez
@akagomez
Jun 09 2015 16:17
@alexisabril I’m fairly certain define properties are inheritable.
Matthew Phillips
@matthewp
Jun 09 2015 16:18
not nicely
Chris Gomez
@akagomez
Jun 09 2015 16:19
No?
Matthew Phillips
@matthewp
Jun 09 2015 16:20
you have to combine them manually in init IIRC
this.define = can.extend(this.define, parent.define)
Nikolay Nadorichev
@Luanre
Jun 09 2015 16:21
in my project I've solved this issue with parseModels and setting model property for local scope
Alexis Abril
@alexisabril
Jun 09 2015 16:22
wow, @akagomez I think you’re right
it looks like it was included into the compute feature you wrote
@matthewp yeah, that’s the way I remember it too
Chris Gomez
@akagomez
Jun 09 2015 16:26
@alexisabril Huh. Right on.
Gerard Finnerty
@halcyonandon
Jun 09 2015 17:14
I'm trying to use a helper as a conditional, but it just displays 'true' and doesn't render the content inside. I followed this guide http://canjs.com/docs/can.mustache.helpers.sectionHelper.html but it doesn't allow it without a # and there's a mismatch in the closing in that doc... is this ready to use?
{{#isTruncated account.name 15}} stuff {{/isTruncated}} ...this helper returns true if the string is greater than 15 and renders only 'true' and not 'stuff'
Chris Gomez
@akagomez
Jun 09 2015 17:17
@halcyonandon if (condition) { return options.fn() } else { return options.inverse() }
Gerard Finnerty
@halcyonandon
Jun 09 2015 17:18
@akagomez I wouldn't do multiple return statements, but the helper itself works, it just doesn't work in mustache as a template condition
Chris Gomez
@akagomez
Jun 09 2015 17:20
The helper will output what you return. If you return true it will render “true”.
Gerard Finnerty
@halcyonandon
Jun 09 2015 17:24
Not based on the docs.... I want to use a helper to render a block... i do not want to just render what the helper returns... see http://canjs.com/docs/can.mustache.helpers.sectionHelper.html

Calls a mustache helper function with a block, and optional inverse block.

{{#helper [args...] [hashName=hashValue...]}}BLOCK{{/helper}}
Calls a mustache helper function or a function with a block to render.

The template:

<p>{{countTo number}}{{num}}{{/countTo}}</p>

this does not work for me
I'm trying in 2.2.5, upgrading to 2.2.6, but the release notes don't mention this feature for 2.2.6
Chris Gomez
@akagomez
Jun 09 2015 17:27
@halcyonandon bitovi/canjs#1535
Gerard Finnerty
@halcyonandon
Jun 09 2015 17:30
I use the hash still with no luck
tried with and without
Chris Gomez
@akagomez
Jun 09 2015 17:31
Can you paste your helper?
Gerard Finnerty
@halcyonandon
Jun 09 2015 17:31
can.stache.registerHelper('isTruncated', function(string, limit) {
return string().length > limit;
});
string() alone is temporary till i do a check if the value being passed is a function
do I need to do something with options.fn or options.inverse? The documents don't state if this is required
Chris Gomez
@akagomez
Jun 09 2015 17:34
@halcyonandon Yes. You need to return 1) options.fn(), 2)options.inverse(), or 3) a String.
Gerard Finnerty
@halcyonandon
Jun 09 2015 17:36
ohhhhhh, ok... trying that, thanks @akagomez
Chris Gomez
@akagomez
Jun 09 2015 17:37
Not a problem.
Gerard Finnerty
@halcyonandon
Jun 09 2015 18:17
yeah that worked, thanks again
opolyo01
@opolyo01
Jun 09 2015 18:56
Wow, looks like I found a bug in can.Component. The scope changes are not getting fired for certain Objects
self.attr( 'queryResult', response );
//Redraw chart if type changes or new data is available
'{scope} queryResult': function( Scope, ev, newVal ) {
debugger;
if(!newVal.isEmpty) {
this.drawChart();
}
},
queryResult function is only getting called when I pass certain type of data to it
It goes back to mine circular dependency issue that I mentioned yesterday.. the object with complex nesting is not getting called, while simple responses do
Chris Gomez
@akagomez
Jun 09 2015 19:03
@opolyo01 Can you copy your component into a gist for one of us to look at?
opolyo01
@opolyo01
Jun 09 2015 19:08
James is helping me now
Chris Gomez
@akagomez
Jun 09 2015 19:13
Oh wow! I didn’t know you could PM in Gitter.
James Atherton
@James0x57
Jun 09 2015 19:14
Am on screenhero, he just joined the team on client's side so he has me on there =)
Chris Gomez
@akagomez
Jun 09 2015 19:16
Cool.
Alexis Abril
@alexisabril
Jun 09 2015 19:16
I have a helper with an element cb. Should the cb be invoked on compute updates? http://jsbin.com/cufuvi/latest/edit
Chris Gomez
@akagomez
Jun 09 2015 19:24
@alexisabril Isn’t the callback meant to be run once the element is inserted into the DOM?
Alexis Abril
@alexisabril
Jun 09 2015 19:29
yeah, I think that’s the intent. I was just attempting to avoid binding manually
Gerard Finnerty
@halcyonandon
Jun 09 2015 19:38
if I do something like this in a component, '{scope} editMode': function() { }' ...where editMode is truthy, on editMode change, this event fires and the viewModel has been updated, but the dom is still the previous state, making it out-of-sync with the attribute value
so how do i bind/unbind to a dom selector that is shown/hidden via truthy mustache conditions?
i could wrap it in a timeout and it should work, but that's super hacky
Alexis Abril
@alexisabril
Jun 09 2015 19:41
@halcyonandon If you share a jsbin, we could take a look. It’s hard to say what the issue could be without seeing the viewmodel, template and events you’ve setup.
Chris Gomez
@akagomez
Jun 09 2015 19:46
@halcyonandon You’ve bound to the event. Not the insertion of the DOM, so this makes sense.
What type of DOM manipulation are you intending to do once that DOM is inserted? I ask because most of the time this is a better job for the template.
Gerard Finnerty
@halcyonandon
Jun 09 2015 21:53
@akagomez I've got bootstrap popovers that need to be instantiated when the elements re-render on change of edit mode, since the elements are added and removed from the dom. I'm not sure how i would do so from the template
Chris Gomez
@akagomez
Jun 09 2015 21:54
Ah. I see.
There are some options.
You could also not remove your DOM and instead just hide it.
Gerard Finnerty
@halcyonandon
Jun 09 2015 22:02
its a complex ui, the edit mode needs to be removed as a requirement , but thank you, this gave me some alternatives to the setTimeout to play with