lawlesst/demo.html

## demo.html
<!doctype html>
<!--[if lt IE 8]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>edit publications</title>

    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script type="text/javascript" src="./example3_files/jquery.min.js"></script>
      <script type="text/javascript" src="./example3_files/jquery-ui.min.js"></script>
      <script type="text/javascript" src="./example3_files/jquery.tmpl.min.js"></script>
      <script type="text/javascript" src="./example3_files/rdf_store_min.js"></script>
      <script type="text/javascript" src="./example3_files/semko.js"></script>
      <script type="text/javascript">
    jQuery(document).ready(function(){
        data = '@prefix : <http://semanticko.org/examples/things/> .\n\
@prefix foaf: <http://xmlns.com/foaf/0.1/> .\n\
@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .\n\
\n\
:John_McCarthy foaf:name "John McCarthy" ;\n\
               a foaf:Person ; \n\
               :inventorOf :Lisp .\n\
:Alan_Kay foaf:name "Alan Kay" ;\n\
          a foaf:Person ; \n\
          :inventorOf :Smalltalk .\n\
:Lisp rdfs:label "Lisp" .\n\
:Smalltalk rdfs:label "Smalltalk" .';
            sko.ready(function() {
                sko.store.load("text/turtle", data, function(success, loaded) {
                sko.registerPrefix("tests", "http://semanticko.org/examples/things/")
                sko.store.execute("SELECT ?person { ?person a foaf:Person }",function(success, results) {
                  // process the query results
                  var curies = [];
                  var curie;
                  for(var i=0; i<results.length; i++) {
                    curie = sko.rdf.prefixes.shrink(results[i].person.value)
                    curies.push(curie);
                  }

                  var rdfModel = {people: ko.observableArray(curies),
                                   selectedPerson: ko.observable()};
                  sko.applyBindings("#example3", rdfModel)
                  sko.applyBindings("#example4", rdfModel)
                });
            });
            });


    });
      </script>
</head>
<body>

<div id="example3">
  Publication type:
  <select data-bind="options: people, value:selectedPerson"></select>
  <br/><br/>
  <div about="selectedPerson">
    <p>
      You have chosen:
      <span data-bind="text: [foaf:name]"></span>
    </p>
    <p rel="[tests:inventorOf]">
      Inventor of:
      <span data-bind="text: [rdfs:label]"></span>
    </p>
  </div>
</div>
  <div id="#output"></div>

  <div id="example4">
  <p about="<http://semanticko.org/examples/things/John_McCarthy>">
    <input data-bind="value: [foaf:name]"></input>
  </p>
  <table id="example4">
    <thead>
     <tr>
      <th>Name</th><th>
     </tr>
    </thead>
    <tr about="<http://semanticko.org/examples/things/John_McCarthy>">
      <td data-bind="text: [foaf:name]"></td>
      </td>
    </tr>
  </table>
</div>

</div>
</body>
</html>
	<!doctype html>
	<!--[if lt IE 8]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
	<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
	<!--[if IE 9]> <html class="no-js ie9 oldie" lang="en"> <![endif]-->
	<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>edit publications</title>

	<meta name="viewport" content="width=device-width,initial-scale=1">
	<script type="text/javascript" src="./example3_files/jquery.min.js"></script>
	<script type="text/javascript" src="./example3_files/jquery-ui.min.js"></script>
	<script type="text/javascript" src="./example3_files/jquery.tmpl.min.js"></script>
	<script type="text/javascript" src="./example3_files/rdf_store_min.js"></script>
	<script type="text/javascript" src="./example3_files/semko.js"></script>
	<script type="text/javascript">
	jQuery(document).ready(function(){
	data = '@prefix : <http://semanticko.org/examples/things/> .\n\
	@prefix foaf: <http://xmlns.com/foaf/0.1/> .\n\
	@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .\n\
	\n\
	:John_McCarthy foaf:name "John McCarthy" ;\n\
	a foaf:Person ; \n\
	:inventorOf :Lisp .\n\
	:Alan_Kay foaf:name "Alan Kay" ;\n\
	a foaf:Person ; \n\
	:inventorOf :Smalltalk .\n\
	:Lisp rdfs:label "Lisp" .\n\
	:Smalltalk rdfs:label "Smalltalk" .';
	sko.ready(function() {
	sko.store.load("text/turtle", data, function(success, loaded) {
	sko.registerPrefix("tests", "http://semanticko.org/examples/things/")
	sko.store.execute("SELECT ?person { ?person a foaf:Person }",function(success, results) {
	// process the query results
	var curies = [];
	var curie;
	for(var i=0; i<results.length; i++) {
	curie = sko.rdf.prefixes.shrink(results[i].person.value)
	curies.push(curie);
	}

	var rdfModel = {people: ko.observableArray(curies),
	selectedPerson: ko.observable()};
	sko.applyBindings("#example3", rdfModel)
	sko.applyBindings("#example4", rdfModel)
	});
	});
	});


	});
	</script>
	</head>
	<body>

	<div id="example3">
	Publication type:
	<select data-bind="options: people, value:selectedPerson"></select>
	<br/><br/>
	<div about="selectedPerson">
	<p>
	You have chosen:
	<span data-bind="text: [foaf:name]"></span>
	</p>
	<p rel="[tests:inventorOf]">
	Inventor of:
	<span data-bind="text: [rdfs:label]"></span>
	</p>
	</div>
	</div>
	<div id="#output"></div>

	<div id="example4">
	<p about="<http://semanticko.org/examples/things/John_McCarthy>">
	<input data-bind="value: [foaf:name]"></input>
	</p>
	<table id="example4">
	<thead>
	<tr>
	<th>Name</th><th>
	</tr>
	</thead>
	<tr about="<http://semanticko.org/examples/things/John_McCarthy>">
	<td data-bind="text: [foaf:name]"></td>
	</td>
	</tr>
	</table>
	</div>

	</div>
	</body>
	</html>