Binding to a property of an object creates the object if it is null.

[Vaccano]

I am not sure this is a bug, but it messed me up and was not expected behavior to me. I have attached a working project that shows this issue (it is a modification to the typescript skeleton).

Here is the issue:

I have a property in my view-model called occupation. The Occupation class has a name and a description. I select the occupation property from a list of occupations in a select. When I pick one, the description is shown in a read-only disabled input box. (Maybe not a good design choice there, but it was the UI look we wanted.)

The first option in the list of occupations is null. The repro steps are:

1. Select an occupation (a valid one)
2. Select the empty option (to set it back to null)

When you select from a valid object to the null object the occupationChanged event fires, changing the occupation to null. That is as expected.

Then, the binding updates for occupation.description. At this point occupation is null. So the value in the input is cleared. That gets interpreted as a change to `occupation.description' to be empty string.

What Happens
Then the binding system makes an object for me with the property of description in it. That created object is then assigned to the occupation variable. (Essentially allowing the binding to a object's property to change the object itself.)

This causes problems because the other values on occupation (such as pay and name) are not present on the dynamically created object that was made by the binding system. I then get errors saying that my property is not present.

What I Would Expect
Since occupation is null, occupation.description cannot be set. So the binding change to occupation.description would be ignored. (Or at the least, the binding to occupation.description would not be allowed to set the occupation property.

Here is my attached project as an example of this issue:

skeleton-typescript.zip

[Vaccano]

Note, the work around to this issue (once you realize what the issue is), is to use a .one-way binding.

Since the read-only input is inside of a form, it causes the .bind to be a two-way binding. So, just specifying one-way side steps this issue.

But it takes a while to figure out what is going on in order to realize what you need to do to get around it.

[jdanyow]

@Vaccano would you mind putting this in a gist so we don't have to npm install, jspm install, etc etc to view it?

Thanks!

[cehoffman]

This appears to be something #205 would solve.

[jdanyow]

Thanks @cehoffman - I agree.

@Vaccano please try the code mentioned in this comment: #205 (comment)

It should resolve your issue.

[Vaccano]

@jdanyow - Sorry I did not get the gist made for this. (I was planning on doing it still.).

But this is indeed a duplicate #205.

Clearly I vote for not automatically creating objects. It should just fail silently.