Binding initial null values

[ivo...@gmail.com]

Hello,

I've just started using KO and I've encountered two issues:

1) I have an observable in my view model called selectedOrg, which initially contains null, but if the user selects something from a list, it becomes non-null. I'm using it like this:

<input data-bind="value: selectedOrg().name">

Unfortunately, this generates an exception when the page is first started "Unable to parse bindings, value: selectedOrg().name, Cannot read property "name" of null", but it works after that - if a user selects an item, the value is changed as expected. I understand why this is happening (selectedOrg() really is null at first), but how to tell KO that this is ok and the binding should be "skipped" in this case? This INPUT element is in a DIV which has a "visible: selectedOrg() != null" binding, so it will not be shown to users.

2) I actually have two DIVs, one which is supposed to be shown when the user has editing rights on the selected item, containing a HTML form and other stuff, and one which is shown when the user does not have sufficient rights, only showing certain elements. I've decided on doing it like this because the data shown and the use cases are very different in those cases. This is my current test code:

<div id="orgedit" data-bind="visible: selectedOrg() != null && selectedOrg().level >= 90">

<input data-bind="value: selectedOrg().name">

</div>

<div id="orgdisplay" data-bind="visible: selectedOrg() != null && selectedOrg().level < 90">

<span data-bind="text: selectedOrg().name"></span>

</div>

Unfortunately, this fails in a bizarre way: only the first DIV works, whichever of the two I have first in my code. For the second, neither the visible nor the text/value binding works. The only way I can explain this is if the exception in binding selectedOrg().name stops KO from processing other binding, in which case it reduces to my first problem. Am I right?

[Uğur Tılıkoğlu]

hi,

 

1) you can use with or virtual ko if bindings as the fiddle: http://jsfiddle.net/tilikoglu/Ke2st/

 

<span data-bind="with: selectedOrg">
<input data-bind="value: name"/>
</span>

 

<!--ko if: selectedOrg() != null -->
<input data-bind="value: selectedOrg().name"/>
<!--/ko-->

 

2) possibly the binding errors cause the logic to fail. plz try "with" and "virtual if" bindings and inform us about the case.

 

thx

 

ugur

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Brandon Wittwer]

Instead of initializing your observables to null initialize them to an empty instance of an object of the type you expect to receive.  Like this:

 

selectedOrg = ko.observable({organizationID=0,name:""});

You can then get fancier and start making classes that represent your objects like this:

 

var Organization = function (OrganizationID, Name) {   
    var _inst = {          
        OrganizationID: ko.observable(OrganizationID),          
        Name: ko.observable(Name),      
    };  
    _inst._state = new ko.dirtyFlag(_inst);   // each object tracks it's own state.   
    return _inst;  
};

then in your viewModel you can do this:

SelectedOrg = ko.observable(new Organization);

and later when you receive data you can do this:

viewModel.SelectedOrg(new Organization(d.OrgID, d.Name));