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

get()/set()

1 Answer 181 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Don
Top achievements
Rank 1
Don asked on 20 Jun 2012, 10:54 PM
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.

1 Answer, 1 is accepted

Sort by
0
Michael
Top achievements
Rank 1
answered on 12 Jul 2012, 06:11 PM
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
Tags
MVVM
Asked by
Don
Top achievements
Rank 1
Answers by
Michael
Top achievements
Rank 1
Share this question
or