return this.promise().state() won't setup the dependency either.
neither does stache's live-binding
the only solution to force computed properties to evaluate their dependencies was to add
Component.extend({
...
scope: MapCtr,
events: {
'{scope} promise': noop,
...
}
...
});
yes it did, however, state does not revaluate itself when promise does. i was expecting any call to .attr would bind the computed being created to that attribute, but it doesn't. which is why i tried sth. like
Component.extend({
...
scope: {
promise: '...',
state: compute(function (newState) {
if (arguments.length) return newState;
var self = this;
self.bind('promise', function (evt, newPromise) {
newPromise.always(function () {
self.attr('state', this.state());
})
})
})
}
...
});but that doesn't work either.
i think i basically try to achieve sth. like amd
can/list/promise does
attr doesn't duffice
the call to
bind i implemented through the component's events object which btw i don't understand the naming of - why not just control?
do you have time for another question? this one should be easier
i figured defining components is the way to go for nested views so i'm building my whole app of them. how do give
viewModel/scope (are these the same?) computed properties access to dom elements? here is the draft:Component.extend({
scope: {
question: computed(function () {
return howToAccessThisComponentsElement; // ?
})
}
})
We strongly discourage DOM manipulation from the scope.
so i went about it like this:
Component.extend({
viewModel: {
internalProp: compute({
get: function () {
// missing element access here
},
set: '', // set
on: '', // bind to the plugin's custom events
off: '', // unbind from the plugin's custom events
})
},
events: {
inserted: '', // init 3rd party plugin on element
removed: '' // teardown 3rd party plugin from element
}
});
You’ll have to remove those yourself I think.
does the
removed event occur after the element has been removed or just before that?
This is, if I’m understanding you correctly.
what about
scope: { ... },
events: {
inserted: function () {
// ..init
this.scope.attr('computed', compute(initial, {
// get, set, on, off // bind to some plugin value
}));
},
removed: function () {
// do i have to tear down the computed? even if its on the scope thus within range of canjs?
}
}
use the define plugin
much better
sth like
scope: function (tagAttrs, parentScope, elem) {
return {
define: {
computed: {
// `value/Value, type/Type, get, set, serialize` etc.
// access to `elem` yes, but without the `on` and `off` options this is a dead end, what now?
}
}
}
}using the define plugin there is no on and off options, how to circumvent that?
var input = document.getElementById("age")
var value = can.compute("",{
get: function(){
return input.value;
},
set: function(newVal){
input.value = newVal;
},
on: function(updated){
input.addEventListener("change", updated, false);
},
off: function(updated){
input.removeEventListener("change", updated, false);
}
})
in my case the value that is set/get/listened to is hidden within the plugin which has it's own methods i.e. not canjs' event system to get/set the value and listen to changes
sure i could add and remove the listeners as you suggested within
inserted and removed with the listeners setting and changing scope/viewModel properties but that scatters the whole logic to maintain one attribute over three places sope/viewModel events.inserted and events.removed which is way inferior to the above almost self-contained approach. sry, i have to leave, i'll be back later this day
just leave me what you think - i'll @akagomez you once i have the jsbin ready for the other issue.
thank you for your time. the help is very much appreciated!
thank you for your time. the help is very much appreciated!
Also, you have
'{scope.promise} change’: function () { … }. change events in CanJS are not the same as in other libraries.