get()/set()

2 posts, 0 answers
  1. Don
    Don avatar
    66 posts
    Member since:
    Jun 2012

    Posted 20 Jun 2012 Link to this post

    This is from your "Getting started" page:
    <!-- View -->
    <div id="view">
    <!-- The value of the INPUT element is bound to the "firstName" field of the View-Model.
    When the value changes so will the "firstName" field and vice versa. -->
    <label>First Name:<input data-bind="value: firstName" /></label>
    <!-- The value of the INPUT element is bound to the "lastName" field of the View-Model.
    When the value changes so will the "lastName" field and vice versa. -->
    <label>Last Name:<input data-bind="value: lastName" /></label>
    <!-- The click event of the BUTTON element is bound to the "displayGreeting" method of the View-Model.
    When the user clicks the button the "displayGreeting" method will be invoked. -->
    <button data-bind="click: displayGreeting">Display Greeting</button>
    </div>
    <script>
    // View-Model
    var viewModel = {
    firstName: "John",
    lastName: "Doe",
    displayGreeting: function() {
    // Get the current values of "firstName" and "lastName"
    var firstName = this.get("firstName");
    var lastName = this.get("lastName");
     
    alert("Hello, " + firstName + " " + lastName + "!!!");
    }
    };
    // Bind the View to the View-Model
    kendo.bind($("#view"), viewModel);
    </script>

    You can actually condense these lines:
    // Get the current values of "firstName" and "lastName"
              var firstName = this.get("firstName");
              var lastName = this.get("lastName");
     
              alert("Hello, " + firstName + " " + lastName + "!!!");

    into a single line which uses the properties directly instead of calling "get()" and assigning it to a local variable, first.  In other words, this works:
    alert("Hello, " + this.firstName + " " + this.lastName + "!!!");

    That makes a lot of sense because we should be able to directly use the local properties.  However, this does not work if you wanted to clear the input:
    this.firstName = '';

    You have to use this, instead:
    this.set("firstName", '');

    which seems strange.  So, my questions are:

    1)  Is there a reason why you didn't directly use the properties (e.g. "this.firstName" instead of "var firstName = this.get('firstName');") in the demo?  Is there a downside to doing it that way?
    2)  Is the fact that we can't "set" local properties directly (as we can "get" them) a bug/oversight?

    Thanks.
  2. Michael
    Michael avatar
    40 posts
    Member since:
    Jan 2012

    Posted 12 Jul 2012 Link to this post

    My guess is because your entity gets converted/wrapped into the observable object, thus it is not the same object anymore. Accessing directly bypasses the observable pattern and is accessing stale or updating a stale version. Just a guess; I haven't looked at the underpinnings but it does not surprise me tho with this convention.

    On another note, came across this as I am having a heck of a time actually getting and setting values, even WITH this convention. Everything seems stale and not triggering when updated. So stumped...

    Mike
Back to Top