In the previous examples (1, 2) we have used fixed URIs to bind RDF nodes to DOM nodes. However, in real applications it is usually impossible to know in advance the exact URI that must be bound to a node or it has to change in time. KnockoutJS offers a solution to this problem that is also available in SemanticKO: observable properties. Observables are properties in the view model that has been declared using the ko.observable or ko.dependentObservable functions. If some DOM property is bound to an observable it is updated automatically by KnockoutJS whenever the value of the property changes. In the same way, if a dependent observable uses another obsevable property to compute its value, it will be recomputed automatically whenever the used observable property changes.
SemanticKO builds on top of this key feature of KnockoutJS making all the properties in RDF nodes observable. It is also possible to pass an observable property as the value for the about and rel properties. In this way, if the observable property changes, all the nodes bound to that subtree will be re-computed dynamically. In the same way if the value of a RDF property belonging to a RDF node bound to the DOM changes, the rendering of that DOM node will be re-computed to reflect the new values of the bound RDF node.
In this example, an observable array for the property people is used to hold the URIs of the RDF nodes that can be selected. Another observable property selectedPerson will hold the selected URI.These observable properties in the view model are bound to the select DOM node using the options KnockoutJS built-in binding.
To retrieve all the available people URIs that can be selected, we run a SPARQL query SELECT ?person { ?person a foaf:Person } agains the data loaded in the application layer that returns all the URIs matching that triple pattern in the loaded data. Finally, since we want to bind compact URIs (CURIEs) in the select DOM node instead of URIs, we use the sko.rdf.prefixes.shrink function to transform the URIs in the query result into CURIEs.
When the user selects an option, the rest of the DOM tree is re-computed and the right RDF nodes are bound to display the corresponding textual values in the DOM tree.