' }; window.viewModelEditor = CodeMirror(document.getElementById("view-model"), { smartIndent: true, lineNumbers: true, value: demo.viewModel, mode: "javascript" }); window.dataEditor = CodeMirror(document.getElementById("data"), { smartIndent: true, lineNumbers: true, value: demo.data, mode: "ntriples" }); window.viewEditor = CodeMirror(document.getElementById("view"), { smartIndent: true, lineNumbers: true, lineWrapping: true, value: demo.view, mode: "htmlmixed" }); jQuery('#sparql-button').bind('click', function() { new rdfstore_frontend('#frontend',sko.store); }); jQuery('#run-button').bind('click', function() { try { jQuery("#output").empty(); var html = window.viewEditor.getValue(); jQuery("#output").append(html); sko.ready(function() { var data = window.dataEditor.getValue(); sko.store.load("text/turtle", data, function(success, loaded) { if(success) { var code = window.viewModelEditor.getValue(); eval(code); jQuery('#sparql-button').removeAttr('disabled'); } else { console.log("Error loading data"); } }); }); } catch(e) { jQuery('#sparql-button').attr('disabled', 'disabled'); console.log(e); console.log(e.message); console.log(e.stack); alert("ERROR: "+e.message); } }); });
KnockoutJS supports templates that are rendered by the library based on the value of observable properties. If the observable property changes, the template is re-rendered with the updated values. SemanticKO extends this support to the use of RDF nodes bound to DOM nodes. If the RDF node changes, the template is also recomputed. At the moment, SemanticKO only supports jQuery Template as the template engine.
SemanticKO also introduces an additional function sko.each
that makes possible to use the results of a SPARQL query as the source values that will be used to render the template for each result.
In this example a template that will generate the li
DOM nodes for a ul
node are generated rendering the example5-template
template. This template is rendered for each occurrence of the query {?subject a foaf:Person}
. Queries used in the sko.each
function must contain only the graph pattern of a SPARQL queries and the binding that will be returned must be named ?subject
. The value of this URI is then bound to the $value
variable of the jQuery template.