arkenidar/examples.html

## examples.html
<!doctype html>
<html>
<head>
<title>Examples</title>
<meta charset="UTF-8">
</head>
<body>

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

<!-- ractive -->
<script src="http://cdn.ractivejs.org/0.7.3/ractive.min.js"></script>
<script>
Ractive.DEBUG = false;
</script>

<!-- items example -->
<div id="container_for_items_example"></div>
<script id="template_for_items_example" type="text/ractive">
<h1>#ractive Items listing
  (ported from a <a href="https://facebook.github.io/react/docs/thinking-in-react.html">ReactJS example</a>
  )
</h1>
<input id="items" placeholder="Search filter"><br>
<input type="checkbox" id="available">hide unavailable items<br>
{{#each items}}
    {{.name}} {{#if !.available}} [unavailable]{{/if}}<br>
{{/each}}
</script>

<script type="text/javascript">
// items example

// on init event
$(function(){
    var ractive = new Ractive({
      el: "#container_for_items_example",
      template: "#template_for_items_example",
      data: {
        items: []
      }
    });

    function update_items(){
        var list=[];
        var available_items=[
            {name:"xxyy", available:true},
            {name:"xxzz", available: true},
            {name:"zzabc", available: false},
            {name:"abc", available: true},
            ];
        var query = $("#items").val();
        var only_available = $("#available").is(":checked");
        for(var i in available_items){
            var item = available_items[i];
            if(item.name.indexOf(query)!==-1 && (only_available?item.available:true) ){
               list.push(item);
            }
        }
        ractive.set("items", list);
        return list;
    }

    // trigger update_items() in related situations
    update_items();
    $("#items").change(update_items); $("#items").keyup(update_items);
    $("#available").change(update_items);
});
</script>

<!-- customers example -->
<div id="container_for_customers_example"></div>
<script id="template_for_customers_example" type="text/ractive">
<h1>#ractive RactiveJS implementation of linked select</h1>

<span>Customers: </span>
<select id="_customers">
    {{#each customers}}
        <option>{{.}}</option>
    {{/each}}
</select> <br>

<span>Order ID: </span>
<select id="_orders">
    {{#each orders}}
        <option>{{.}}</option>
    {{/each}}
</select> <br>
</script>

<script type="text/javascript">
// customers example

// on init event
$(function(){

    // customers
    var customers_collection = {"Customer A": [1,2,3], "Customer B":[5,6,7]};
    var ractive = new Ractive({
      el: "#container_for_customers_example",
      template: "#template_for_customers_example",
      data: {
        customers: Object.keys(customers_collection),
      }
    });
    function update_customers(){
        ractive.set("orders", customers_collection[$("#_customers").val()])
    }

    // trigger update_customers() in related situations
    update_customers(); $("#_customers").change(update_customers);
});
</script>

<!-- 2way example -->
<div id="container_for_2way_example"></div>
<script id="template_for_2way_example" type="text/ractive">
    <h1>#ractive Two way data binding</h1>
    <input placeholder="Type your name" value="{{user.name}}">
    <input placeholder="Type your age" value="{{user.age}}">
    <p>name: {{user.name}}</p>
    <p>age: {{user.age}}</p>
    <button id="inc_age">set age</button>
</script>

<script type="text/javascript">
// 2way example

// on init event
$(function(){

    var ractive = new Ractive({
      el: "#container_for_2way_example",
      template: "#template_for_2way_example",
      data: {
        user: {
          name: "Peppe",
          age: 45,
        }
      }
    });

    $("#inc_age").click(function(){
        ractive.set("user.age", parseInt(ractive.get("user.age"))+1)
    });
});
</script>

<br>

<!-- jquery -->
<h1>#jquery JQuery implementation of linked select</h1>
<span>Customers: </span><select id="customers"></select> <br>
<span>Order ID: </span><select id="orders"></select> <br>
<script>
$(function(){

    // mocks the request/response of server data
    function http_get(url, data, done){
        var server_available = false;
        if(server_available){
          jQuery.get(url, data).done(done);
        }else{
          var response;
          if(url=="orders-mock.php"){
              var order = ["","1\n2\n3\n", "5\n6\n7\n"];
              response = order[data.customer_id];
          }else if(url=="customers.txt"){
              response = "1, Customer A\n2, Customer B\n";
          }
          done(response);
        }
    }

    function customers_on_change(){
        var customer_id_value = parseInt($("select#customers").val());
        var select_orders = $("select#orders");
        select_orders.empty();
        http_get("orders-mock.php", {customer_id:customer_id_value}, function(data){
            var string = data;
            var lines = string.split("\n");
            for(line in lines){
                var order_id = lines[line];
                if(order_id=="") continue;
                select_orders.append($("<option>", {value: order_id, text: order_id}));
            }
        });
    }

	var select_customers = $("select#customers");
	select_customers.on("change", customers_on_change);
	http_get("customers.txt", {}, function(data){
		var string = data;
		var lines = string.split("\n");
		for(line in lines){
			var fields = lines[line].split(",");
			if(fields.length!=2) continue;
			var customer_id = fields[0];
			var name = fields[1];
			select_customers.append($("<option>", {value: customer_id, text: name}));
		}
    customers_on_change();
	});
});
</script>

</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Examples</title>
	<meta charset="UTF-8">
	</head>
	<body>

	<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

	<!-- ractive -->
	<script src="http://cdn.ractivejs.org/0.7.3/ractive.min.js"></script>
	<script>
	Ractive.DEBUG = false;
	</script>

	<!-- items example -->
	<div id="container_for_items_example"></div>
	<script id="template_for_items_example" type="text/ractive">
	<h1>#ractive Items listing
	(ported from a <a href="https://facebook.github.io/react/docs/thinking-in-react.html">ReactJS example</a>
	)
	</h1>
	<input id="items" placeholder="Search filter"><br>
	<input type="checkbox" id="available">hide unavailable items<br>
	{{#each items}}
	{{.name}} {{#if !.available}} [unavailable]{{/if}}<br>
	{{/each}}
	</script>

	<script type="text/javascript">
	// items example

	// on init event
	$(function(){
	var ractive = new Ractive({
	el: "#container_for_items_example",
	template: "#template_for_items_example",
	data: {
	items: []
	}
	});

	function update_items(){
	var list=[];
	var available_items=[
	{name:"xxyy", available:true},
	{name:"xxzz", available: true},
	{name:"zzabc", available: false},
	{name:"abc", available: true},
	];
	var query = $("#items").val();
	var only_available = $("#available").is(":checked");
	for(var i in available_items){
	var item = available_items[i];
	if(item.name.indexOf(query)!==-1 && (only_available?item.available:true) ){
	list.push(item);
	}
	}
	ractive.set("items", list);
	return list;
	}

	// trigger update_items() in related situations
	update_items();
	$("#items").change(update_items); $("#items").keyup(update_items);
	$("#available").change(update_items);
	});
	</script>

	<!-- customers example -->
	<div id="container_for_customers_example"></div>
	<script id="template_for_customers_example" type="text/ractive">
	<h1>#ractive RactiveJS implementation of linked select</h1>

	<span>Customers: </span>
	<select id="_customers">
	{{#each customers}}
	<option>{{.}}</option>
	{{/each}}
	</select> <br>

	<span>Order ID: </span>
	<select id="_orders">
	{{#each orders}}
	<option>{{.}}</option>
	{{/each}}
	</select> <br>
	</script>

	<script type="text/javascript">
	// customers example

	// on init event
	$(function(){

	// customers
	var customers_collection = {"Customer A": [1,2,3], "Customer B":[5,6,7]};
	var ractive = new Ractive({
	el: "#container_for_customers_example",
	template: "#template_for_customers_example",
	data: {
	customers: Object.keys(customers_collection),
	}
	});
	function update_customers(){
	ractive.set("orders", customers_collection[$("#_customers").val()])
	}

	// trigger update_customers() in related situations
	update_customers(); $("#_customers").change(update_customers);
	});
	</script>

	<!-- 2way example -->
	<div id="container_for_2way_example"></div>
	<script id="template_for_2way_example" type="text/ractive">
	<h1>#ractive Two way data binding</h1>
	<input placeholder="Type your name" value="{{user.name}}">
	<input placeholder="Type your age" value="{{user.age}}">
	<p>name: {{user.name}}</p>
	<p>age: {{user.age}}</p>
	<button id="inc_age">set age</button>
	</script>

	<script type="text/javascript">
	// 2way example

	// on init event
	$(function(){

	var ractive = new Ractive({
	el: "#container_for_2way_example",
	template: "#template_for_2way_example",
	data: {
	user: {
	name: "Peppe",
	age: 45,
	}
	}
	});

	$("#inc_age").click(function(){
	ractive.set("user.age", parseInt(ractive.get("user.age"))+1)
	});
	});
	</script>

	<br>

	<!-- jquery -->
	<h1>#jquery JQuery implementation of linked select</h1>
	<span>Customers: </span><select id="customers"></select> <br>
	<span>Order ID: </span><select id="orders"></select> <br>
	<script>
	$(function(){

	// mocks the request/response of server data
	function http_get(url, data, done){
	var server_available = false;
	if(server_available){
	jQuery.get(url, data).done(done);
	}else{
	var response;
	if(url=="orders-mock.php"){
	var order = ["","1\n2\n3\n", "5\n6\n7\n"];
	response = order[data.customer_id];
	}else if(url=="customers.txt"){
	response = "1, Customer A\n2, Customer B\n";
	}
	done(response);
	}
	}

	function customers_on_change(){
	var customer_id_value = parseInt($("select#customers").val());
	var select_orders = $("select#orders");
	select_orders.empty();
	http_get("orders-mock.php", {customer_id:customer_id_value}, function(data){
	var string = data;
	var lines = string.split("\n");
	for(line in lines){
	var order_id = lines[line];
	if(order_id=="") continue;
	select_orders.append($("<option>", {value: order_id, text: order_id}));
	}
	});
	}

	var select_customers = $("select#customers");
	select_customers.on("change", customers_on_change);
	http_get("customers.txt", {}, function(data){
	var string = data;
	var lines = string.split("\n");
	for(line in lines){
	var fields = lines[line].split(",");
	if(fields.length!=2) continue;
	var customer_id = fields[0];
	var name = fields[1];
	select_customers.append($("<option>", {value: customer_id, text: name}));
	}
	customers_on_change();
	});
	});
	</script>

	</body>
	</html>