This is a migrated thread and some comments may be shown as answers.

Inheritance and events (mouseover/out)

7 Answers 76 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Matjaz
Top achievements
Rank 1
Matjaz asked on 28 Jul 2015, 12:37 PM

I was following the Daniel tip, how to achieve inheritance with MVVM. But I am getting strange errors in jquery when using mouseover/out in ListView template.

How can I achieve this?

dojo

7 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 30 Jul 2015, 11:23 AM
Hi,

The problem comes from the fact that products datasource is not observed correctly in this case correctly. You will need to call the ObservableObject init method in order to resolve this issue. Check the updated demo:
Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Saop
Top achievements
Rank 1
answered on 10 Aug 2015, 12:38 PM

This is great, but how can I add some fields to viewModel?

This is not working:

var viewModelBase = kendo.data.ObservableObject.extend({
    init: function() {
      kendo.data.ObservableObject.fn.init.call(this, this);
    },
    isVisible: true,
    onSave: function(e) {
        kendoConsole.log("event :: save(" + kendo.stringify(e.model, null, 4) + ")");
    },
    products: new kendo.data.DataSource({
        schema: {
            model: {
                id: "ProductID"
            }
        },
        batch: true,
        transport: {
            read: {
                url: "http://demos.telerik.com/kendo-ui/service/products",
                dataType: "jsonp"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                }
            }
        }
    }),
  onMouseClick: function() {
    kendoConsole.log("event :: click");
  },
  onMouseOver: function()
  {
    kendoConsole.log("event :: mouseover");
  },
  onMouseOut: function()
  {
    kendoConsole.log("event :: mouseout");
  }
});
 
var viewModel = new viewModelBase({
  test: "bla"
});
 
"test" is not bind to anything. For example <div data-bind="html: test"></div> does not print "bla".

0
Petyo
Telerik team
answered on 11 Aug 2015, 08:58 AM

Hello Matjaž,

the object you are passing a parameter in the constructor of the viewmodel instance should be handled in the init method of the observable object descendant - right now it its fields are not assigned anywhere in order to be subsequently bound to. 

I would also like to ask you to use your newly created support account
admin@d****.eu with the transferred license, as the current one no longer has an associated active support. 

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Saop
Top achievements
Rank 1
answered on 18 Aug 2015, 05:59 AM
Hi. I know. I tried this way:
var viewModelBase = kendo.data.ObservableObject.extend({
    field1: "some test",
    init: function(options) {
      kendo.data.ObservableObject.fn.init.call(this, options);
    },

 

but then field1 is not recognized by MVVM.

0
Petyo
Telerik team
answered on 19 Aug 2015, 04:15 PM

Hello Matjaž,

this approach won't work for sure. Please check my previous reply - you need to assign the fields from the received parameter to your own object. 

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Saop
Top achievements
Rank 1
answered on 23 Aug 2015, 06:04 AM

I know.

Last question. Would this be ok?

init: function (options)
    {
        kendo.data.ObservableObject.fn.init.call(this, $.extend(this, options));
    },

Or it would be better to avoid that and just init fields in init method?

0
Petyo
Telerik team
answered on 25 Aug 2015, 03:31 PM

Hello Matjaž,

$.extend(this, options) does pretty much what it says. It may do the trick for your case. 

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
MVVM
Asked by
Matjaz
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Saop
Top achievements
Rank 1
Petyo
Telerik team
Share this question
or