Obserable objects and JS Inheritance

5 posts, 0 answers
  1. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 28 Jan 2014 Link to this post

    I was trying to define some reusable code but then ran into problems because methods/properties in the MVVM observable object weren't there. 

    Take this code for example: 
    var editableModel = function ()
    {
        this.isEditing = false;
    };
    editableModel.prototype.toggleEditMode = function (e)
    {
        this.set("isEditing", !this.isEditing);
        e.stopPropagation();
    };
     
    var individualClient = function ()
    {
        this.clientCode = "";
        this.initials = "";
        this.title = "";
        this.dateOfBirth = "";
        this.language = "";
    };
    individualClient.prototype = new editableModel();

    Now if I were to try and use this as an observable object in the following way: 
    var viewModel = new individualClient();
    viewModel.clientCode = "ABS";
    viewModel.initials = "JA";
    ... //set the rest of the properties
     
    kendo.bind($(".binding-container"),viewModel);

    and if I had some HTML that made use of the isEditing, or toggleEditMode property/method: 
    <a href="#" onclick="viewModel.toggleEditMode()">Edit</a>
    <!--NOTE: This hyperlink is not located inside the binding-container which is why I'm calling it as I am, using the onclick event and the qualified object name -->

    <span data-bind="text: clientCode, invisible: isEditing">@Model.ClientCode</span>

    it wouldn't work, or rather isn't working. 

    Is this because kendo is replacing my Object's prototype with it's own ObservableObject? 

    Regards,
    Jacques






  2. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 30 Jan 2014 Link to this post

    Hello Jacques,

    The code will not work because:
    1. The "viewModel" is not converted to an ObservableObject and thus does not have a set method which is used in the toggleEditMode function. You should use the kendo.observable method to convert the object in order to be able to use the method with the viewModel object:
      viewModel = kendo.observable(viewModel);
      kendo.bind($(".binding-container"),viewModel)
    2. The event handler is set with the onclick attribute and it will not be passed an event argument by default. You should either pass the event argument to the function or use events or click binding:
      <a href="#" data-bind="click: toggleEditMode">Edit</a>

    Regards,
    Daniel
    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. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 30 Jan 2014 in reply to Daniel Link to this post

    sorry Daniel I forgot to include the code snippet where the model is converted to an observable which is as follows:
    //i'll change the object name to model so as to avoid confusion
    var model = new individualClient();
    model.clientCode = "ABS";
    model.initials = "JA";
    ... //set the rest of the properties
     
    var kendoViewModel = kendo.observable(model);
     
    //then do the binding
    kendo.bind(".container",kendoViewModel);

    So since it is converted and still didn't work, I thought that perhaps the reason is the call to kendo.observable which may replace my individualClient's prototype with an ObservableObject object instead of my 'parent' object  editableModel. 

    ?

    Regards,
    Jacques
  5. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 03 Feb 2014 Link to this post

    Hello again Jacques,

    Did you also change the code for handling the event propagation? I created a small jsBin example using the described setup and it seems to work as expected on my side.

    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 03 Feb 2014 in reply to Daniel Link to this post

    I'll give that one a try and get back to you. Your jsBin seems to be doing exactly what I was trying to achieve.

    Regards,
    Jacques
Back to Top
Kendo UI is VS 2017 Ready