Description

In the previous examples, we have seen how KnockoutJS makes possible to establish bindings between the RDF graph data layer in the browser and the DOM tree the browser renders. One important feature about the binding mechanism implemented by the library is that it is bidirectional: not only DOM values are recomputed when change happens in the RDF graph, but the RDF graph is also updated when change happens in a bound DOM node. This is specially useful when creating edit interfaces users can interact with.

In this example we have bound the same RDF node to two different DOM nodes:

  • A input field
  • A tr table row
The user can edit the value of the foaf:phone property in the input field, and when it has finished editing the value, the changes will be stored in the RDF data layer and immediately propagated to the bound tr node.

The changes in the RDF graph can also be tested using the SPARQL frontend available at the top of the page and connected to the RDF data layer of the example.

Output

View

Data (JSON-LD)

View Model