have a look at the js bin, when you are free
In my code version, as opposed to my JS Bin version, I added a setter on player. It is getting called before parseModel. Any ideas why?
@Bajix reading the documentation, it says that parseModel is never called directly, "Instead the deferred returned by findOne, update, and create is piped into parseModel."
@RALifeCoach That’s correct. When you can model/models it’ll call parseModel internally
You shouldn’t ever call it directly
how do I get the parseModel to be called without an ajax call being made?
You call the model/models function on your can.Model constructor
do I override makeCallOne and then model.callOne()?
All you need to do is call something like User.models(data)
as of 2.1
You’re misunderstanding that statement. models/model is not deprecated
@RALifeCoach The functionality changed, that is all
I instantiate the model passing no data. I then say:
this.playerRowModel.model(data); and get the error "models is not a function"
I tried model and models
Oh you need to extend can.Model instead of can.Map
That’s maybe your issue
okay - some updates - the mapping is not taking a really long time - 4 seconds for all 156 rows
@Bajix and it seems like I lost some attributes
I am off to bed - I get up very early
thanks for your help - I will update you tomorrow with any progress
One question - would take the returned value from parseModel and use it to instantiate a Map or Model?
re: infinite loop, you need to set the value to the result of calling model
So if (foo.bar) { foo.bar = Bar.model(foo.bar) }
I then say,
playerRowMap = new Model(data);
parseModel: function( data, xhr ) {
if (typeof data === 'string') {
return {
_id: data
};
}
var __v = data.__v,
_id = data._id;
if (_id && typeof __v === 'number' && Channel.store.hasOwnProperty(_id)) {
var channel = Channel.store[_id];
if (channel.__v > __v) {
delete data.__v;
delete data.userCount;
delete data.guestCount;
}
}
can.batch.start();
[
'moderators',
'bannedUsers',
'bootedUsers'
].forEach(function( key ) {
if (data.hasOwnProperty(key)) {
data[key] = User.models(data[key]);
}
});
if (data.owner) {
can.extend(data.owner, {
isModerator: true,
isOwner: true
});
data.owner = User.model(data.owner);
}
can.batch.stop();
return data;
},
Use it like that
model returns an instance
And you don’t pass it the promise, you pipe it the AJAX request
I have said that so many times now.
Whatever the data source is, doesn’t matter, I was giving you an example
That’s it
alright - that worked and is better timing then my last attempt
however, the updating is still taking a while
alright then suggest how best I update the model for maximum efficiency
I will read your response in the morning
1) Pass around map instances instead of cross-binding properties to components
2) Use one-way binding whenever applicable
3) Use leakScope: false whenever applicable
4) Use ./ within your bindings
5) Use computes like a mad man. The goal is to lower unnecessary change events. For example, the isAdmin getter I described above is actually really performant, as now I can bind to it elsewhere, and something like changing users or logging in that would trigger isAdmin to be re-computed wouldn’t trigger other computes that are dependent on isAdmin from re-computing if isAdmin doesn’t change
isAdmin: {
get: function() {
var profile = this.attr('profile');
if (profile) {
return profile.attr('tier') === config.tiers.indexOf('admin');
}
return false
}
}
how look like the worse isAdmin method?
@pYr0x parseModel isn’t producing any better results than simply using type: ‘*’ for objects not needing observables
also 3) and 4) are good points
to look at
computes give a way to handle events outside of the component when attributes within the map associated with the component change
I don’t really have a need for that
When I turned on leakScope - everything stopped working
All my data is in the viewModel, not in the outer scope
I haven’t tried ./ and I must confess I am not sure what that means
I don’t recall seeing that in the docs
@RALifeCoach one thing I would test is how much of the DOM is being updated when you make a change
you can turn on paint rectangles in chrome dev tools
then when you change something, the piece of the DOM that was updated should flash green
I am not seeing any of it flash green during load or reload
ok, when you say “updating is taking a while” what do you mean exactly?
var stache1 = new Date().getTime();
this.playerRowMap.attr({'player': request.player});
var stache2 = new Date().getTime();
pgatour.stacheTime += stache2 - stache1;
I haven’t tried it on my phone yet
I can see the delay
2 seconds is a noticeable delay
so… you click a button and expect new data to be shown, but it takes time
but during that time, the browser isn’t locked… you can scroll, or click other things
and it is a conversion of existing code that uses jQuery tmpl - that time to reload was .4 seconds
and if I write code to strip down my player object from hundreds of properties to the 30 or so I need, I get close to the .4 second reload time
ok, yeah, I’ve been reading some of the earlier conversation
I have used type: ‘*’ and parseModel - both gave the same improvement - down from 6 seconds to reload
when you notice the delay, what are you expecting to change?
so… you click a button and expect new data to be shown, but it takes time
It is actually a very long and complicated page load - the data is loaded once and then reloaded with more details
so you’re expecting the entire screen to change?
I have added the timing code to find out why those two steps were taking so long
I can’t do anything to reduce the initial load
That’s why I am now focusing on the reload
Justin suggested lazy map and I was seeing timings where I wanted them to be
But lazy map is broken with more complex data
I was really hoping someone would fix lazy map
Do you have any new suggestions? Can you schedule a fix to lazy map?
if it’s not a DOM update that is causing the problem (which you ruled out using paint flashes) I don’t have any new suggestions right now
but I can’t promise anything
ok, if you can track down the exception, PRs are always welcome
I found the exception, but I just don’t know the code well enough to to create a PR
define('can/map/lazy/lazy', [
'can/util/util',
'can/map/lazy/bubble',
'can/map/map_helpers',
'can/map/map',
'can/list/list',
'can/map/lazy/nested_reference'
], function (can, bubble, mapHelpers) {
can.LazyMap = can.Map.extend({ _bubble: bubble }, {
setup: function (obj) {
this.constructor.Map = this.constructor;
this.constructor.List = can.LazyList;
this._data = can.extend(can.extend(true, {}, this._setupDefaults() || {}), obj);
can.cid(this, '.lazyMap');
this._setupComputedProperties();
var teardownMapping = obj && mapHelpers.addToMap(obj, this);
this._nestedReference = new can.NestedReference(this._data);
if (teardownMapping) {
teardownMapping();
}
can.each(this._data, can.proxy(function (value, prop) {
this.___set(prop, value);
}, this));
this.bind('change', can.proxy(this._changes, this));
},
_changes: function (ev, attr, how, newVal, oldVal) {
},
_addChild: function (path, newChild, setNewChild) {
var self = this;
this._nestedReference.removeChildren(path, function (oldChild, oldChildPath) {
bubble.remove(self, oldChild);
if (newChild) {
var newChildPath = oldChildPath.replace(path + '.', '');
if (path === newChildPath) {
oldChild._nestedReference.each(function (obj, path) {
newChild._nestedReference.make(path());
if (self._bindings) {
bubble.add(this, newChild, path());
}
});
} else {
var reference = newChild._nestedReference.make(newChildPath);
if (self._bindings) {
bubble.add(oldChild, newChild, reference());
}
}
}
});
if (setNewChild) {
setNewChild();
}
the line throwing the exception is
oldChild._nestedReference.each(_nestedReference is null
oldChild is not a type Constructor, but an Object
@phillipskevin do you have an estimate as to when you can have a look?
I’m going to look at the issue today, but don’t have any idea if I’ll know how to fix it.
@RALifeCoach can you reproduce this issue with lazymap on a simple and short example
I knew someone was going to ask that. Yes I can.
so a test that reproduce this problem is the first step to fix this
btw. can-map-lazy is currently for canjs 3.0
not for 2.x
I know it’s scheduled for 3.0, but gave me the best performance improvement so far
require(‘can/map/lazy'); without installing can-map-lazy
there is a can.LazyMap plugin for 2.x also
right @pYr0x ?
@RALifeCoach you can look into this https://github.com/canjs/canjs/blob/master/map/lazy/nested_reference_test.js
if i understand right, you have problems with nested properties?
yes - nested properties are causing the problem
@RALifeCoach this stache isnt very short
and the test also
this code isnt a testable code...
can you remove that
still a component
yes there is still a component
how’s how my code works
When I removed the component it stopped crashing
good to know
so the problem is not lazymap
it is the component?
the line of code that is throwing the exception is in lazy map
the component probably causes lazyMap to set up the binding
the component binds, and lazymap tries to initialize the data
it has to do with observables - and the component is the one telling lazy map to create the observable. If I knew the canJS code better, I could probably re-create without the component.
just do
theMap.bind(‘whatever.data.that.fails’, function() { … })
to bind to the map manually
At this point, the code is as small as I can make it and still have it crash. The bug may be in lazy map, it may be in component, it may be somewhere else altogether.
here is the latest - I will also post the link in the issue
@RALifeCoach so your performace is better now using LazyMap?
I am working through the changes now and I will keep you posted
the update is now down to 1 second
I was really hoping to have it lower
in the .6-.8 range
var template = can.stache('<player-row id="player-row-{{pid}}" {pid}="pid" {parent}="parent"></player-row>');
var fragment = template({
pid: this.pid,
parent: this
});
the player-row component has a viewModel and in the viewModel there is a set on pid. However, the set isn’t getting called. Instead the component starts trying to fill out the fragment from it’s stache view.