@patrickclancy Personally, I would do this with something at the view layer such as custom attributes so you don't have to litter your map definitions with knowledge of how they might be used in the view http://jsbin.com/zozuhevosa/2/edit?html,js,output
I like the abstraction
it’s basically a custom can-value
any reason checkboxes aren’t used for the boolean type instead of a radio button?
I know angular actually has filters for this type of stuff(turning a bool -> string, etc aside from the data layer and view)
yeah, in this case it’d be cool either way
if it gets really complex(re-structuring an object), I typically have a viewmodel inbetween the actual model and whatever is using it
and then put all my conversions in there
I’m starting to get drawn back to the filters approach though
then you could do:
<input type=“radio” can-value=“{foo}” can-type=“boolean”/>
<input can-value=“{modifiedAt}” can-type=“date”/>
<input can-value=“{price}” can-format=“$dd.dd”/>or something
those syntaxes were off the top of my head, don’t hold me to those ;)
I just want a normalized way to do conversions between the presentation/data layer elegantly
@halcyonandon if you are only displaying the data, mustache helpers are certainly appropriate, but if the data is being manipulated in the view, then you can do a lot more with the viewModel such as add setters and type conversions through the define plugin that you wouldn't necessarily want in your model, or at least that is what I am understanding
computeA.value seems to work.
Sorry to bug you.
var ChildVM = can.Map.extend({
define: {
myComputed: {
get: function(){ return 'foo';}
}
}
});
can.Component.extend({
tag: 'my-child',
viewmodel: ChildVM
});
can.Component.extend({
tag: 'my-parent',
template: can.stache('<my-child myComputed="{getComputed}"></my-child>')
viewmodel: {
getComputed: null
}
});
@ilyavf you can access the parent scope from the child to set properties like in this example:
http://jsbin.com/zoginopiwu/2/edit?html,js,console,output
but there might be a better approach to your problem if you could provide more info
http://jsbin.com/zoginopiwu/2/edit?html,js,console,output
but there might be a better approach to your problem if you could provide more info
var ViewModel = {
isSelectedDimension: '',
define: {
dimensionList: {
get: function() {
isSelectedDimension: '',
define: {
dimensionList: {
get: function() {
Here's the event that tries to update it
'.search-dimension keyup': function(el, ev){
var searchTerm = el.val();
var filteredDimensions = _.filter(this.scope.dimensionList(), function(dim){
return dim.title.indexOf(searchTerm) !== -1;
});
this.scope.attr('dimensionList', filteredDimensions);
},
var searchTerm = el.val();
var filteredDimensions = _.filter(this.scope.dimensionList(), function(dim){
return dim.title.indexOf(searchTerm) !== -1;
});
this.scope.attr('dimensionList', filteredDimensions);
},
somehow this.scope.dimensionList() always stays the same
I haven't worked with can.Components much, so might be missing something fundamental
@matthewp We can replace computes on
can.Map’s with { type: ‘compute’ }. It’s just not documented yet: bitovi/canjs#1690
@akagomez Yes, I want something like this. Though, I am not sure I like this whole serialize thing. At first I can do -- map.attr('list') // [1, 2, 3] And after setting new array on the list I get a serialized object. Let me check that this will even auto update in my stache template if I keep serialized version of it
@matthewp Ok so things with get should be immutable? But I thought the purpose of compute objects to be updated and bindable to a template. If I had a simple can.List outside of Map then everything would just work by updating the list, but what is the process of updating properties under can.Map within define?
@opolyo01 Here’s a better example: http://jsbin.com/dagefe/2/edit
@opolyo01 I think @matthewp Was misinterpretting your question. Computes are the low-level utility that backs
can.Map.define. A compute takes a property on set… compute(newVal). So if you unknowingly attempted to set list to something else, like.. map.attr(‘list’, someOtherList), you’ll actually be passing someOtherList to the compute, like this.. map.list(someOtherList), as opposed to map.list = someOtherList. Does that make sense?
Ok thanks. I found an issue. So get in can.Map define actually being called only if accepts an argument with the new value. I thought, by doing map.attr('list', someOtherList) it will automatically bind to template without me writing the logic in get. So now I have this define: {
dimensionList: {
get: function(filteredDimensions) { instead of define: {
dimensionList: {
get: function() {
dimensionList: {
get: function(filteredDimensions) { instead of define: {
dimensionList: {
get: function() {
Basically, I have search that filters for the list of dimensions to show