ReactiveJS Grid

by DiscoverSDK

HTML

<body>
<fieldset>
    <div id='container'></div>
</fieldset>
<script id='resource' type='text/ractive'>
    <h3>Add Resources</h3>
	<form on-submit="addResource">
		<span >Description:</span>
		<input type="text" style="width:180px;" name="description" />
		<span > URL:</span>
		<input type="text" style="width:340px;" name="url"/>
		<button type="submit">Add</button><br/>
	</form>
	<a href="#" on-click="showResource">Show</a>
	<h3>List of Resources</h3>
		<table  border="1" style="width:740px;" >
		    <thead>
			    <tr>
			        <th><h4>Description</h4></th>
			        <th><h4>URL</h4></th>
			        <th></th>
			    </tr>
		    </thead>

		    <tbody>
		    	{{#each resourceList:num}}
			    <tr>
			        <td><input style="width:200px;" type="text" value="{{ResourceDescription}}" /></td>
		        	<td><input style="width:443px;" type="text" value="{{ResourceAddress}}" /></td>
		        	<td><button on-click="removeResource:{{num}}">Remove</button></td>
			    </tr>
			    {{/each}}
		    </tbody>
		</table>


  </script>

JavaScript

var resources = [{'ResourceAddress': 'http://www.discoversdk.com', 'ResourceDescription':'Great site'}];
var reactive = new Ractive({

    el: '#container',

    template: '#resource',

    data: {resourceList: resources},
});

reactive.on({
    addResource: function(event){
        console.log(event.node.description.value);
        var description = event.node.description.value;
        var url = event.node.url.value;
        if(description != '' && url != ''){
            var data = {'ResourceAddress': url, 'ResourceDescription': description};
            resources.push(data);
            event.node.description.value = '';
            event.node.url.value = '';
        }
        return false;
    },
    removeResource: function(event, index){
        resources.splice(index, 1);
    },
    showResource: function(){
        alert(JSON.stringify(resources));
    }
});