Overwriting methods of a ViewModel (getter)

CanJS
1

I have successfully created a ViewModel (DefineMap.extend) and then modified the base functions using ViewModel.prototype.functionName = functionDefinition (see example below). But my I couldn’t do the same for the getter (or whatever the exact name it has).

So I have a MyComponent.js file:

import Component from 'can-component';
import DefineMap from 'can-define/map/';
import './my-component.less';
import view from './my-component.stache';
import MainModel from 'ozzi-application/models/my-model';


export const ViewModel = DefineMap.extend({
  get mainModelPromise() {
    return MainModel.getList({});
  },
  mainModelValue: {
    get: function(last, set) {
      this.mainModelPromise.then(set);
    }
  },
  deleteMe: function() {
    console.log('delete me');
    // some code that deletes
  }
});


ViewModel.prototype.deleteMe = function() {
  console.log('deleting has been disabled');
};


export default Component.extend({
  tag: 'ozzi-apps-my-component',
  ViewModel,
  view
});

The previous code works fine.

But the following code won’t work:

ViewModel.prototype.mainModelPromise = function() {
  return MainModel.getList({name: "John"});
};

I guess there must be a similar way of doing it.
Thanks!

2

You can extend your ViewModel to override these properties. But that would create a new type of DefineMap, so I’m not sure if that’s what you need.

const Modified = ViewModel.extend({
    mainModelPromise: {
        get(){
            return MainModel.getList({name: "John"});
        }
    },
    deleteMe(){
        console.log('deleting has been disabled');
    }
});