Inheritance and events (mouseover/out)

8 posts, 0 answers
  1. Matjaz
    Matjaz avatar
    94 posts
    Member since:
    Jun 2014

    Posted 28 Jul 2015 Link to this post

    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

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 30 Jul 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Matjaž
    Matjaž avatar
    81 posts
    Member since:
    Jul 2015

    Posted 10 Aug 2015 in reply to Georgi Krustev Link to this post

    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".

  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 11 Aug 2015 Link to this post

    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!
     
  6. Matjaž
    Matjaž avatar
    81 posts
    Member since:
    Jul 2015

    Posted 18 Aug 2015 in reply to Petyo Link to this post

    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.

  7. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 19 Aug 2015 Link to this post

    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!
     
  8. Matjaž
    Matjaž avatar
    81 posts
    Member since:
    Jul 2015

    Posted 23 Aug 2015 in reply to Petyo Link to this post

    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?

  9. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 25 Aug 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready