<!DOCTYPE html>
<html>
<head>
<link href="//cdn.jsdelivr.net/picnicss/4.1.1/picnic.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<h1>Hello Mag.JS!</h1>
<a target="_top" href="https://github.com/magnumjs/mag.js">GitHub</a>
<hr/>
<div id="todos">
<h2>Todos</h2>
<form>
<input name="text" />
<button>Add</button>
</form>
<ol>
<h3 class="total"></h3>
<li class="list">
<label>
<input class="check" type="checkbox" />
<span class="checkable description"></span>
</label>
<span class="close">✖</span>
</li>
</ol>
</div>
<script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.0.21.3.min.js"></script>
<script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.addons.0.21.min.js"></script>
<script src="//rawgit.com/magnumjs/mag.js/master/src/addons/mag-store.js"></script>
<script src="//cdn.rawgit.com/MaxArt2501/object-observe/master/dist/object-observe.min.js"></script>
<script src="todos-module.js"></script>
</body>
</html>
//Define & Run Module:
var app =mag.module('todos', {
controller: function(props) {
props.todos = mag.store('4ky1b');
props.todos.subscribe(function(state) {
console.log('state', state);
})
this.todos = props.todos.find();
//a slot to store the name of a new todo before it is created
this.text = "";
},
view: function(state, props) {
if (state.todos.length) {
state.total = 'Total: ' + state.todos.length;
state.list = state.todos.map(function(task) {
var checked = {
_onClick: function(e) {
// change
state.todos = props.todos.update(task, {
complete: e.target['checked']
});
}
};
var remove = {
_onClick: function() {
state.todos = props.todos.remove(task);
}
}
task.complete ? checked._checked = true : "";
return {
close: remove,
description: task.name,
check: checked
};
});
}
state.form = {
_onSubmit: function() {
if (state.text) {
state.todos = props.todos.insert({
complete: false,
name: state.text
});
state.text = '';
}
return false;
}
};
}
});
ol h3:empty + li,
.hide {
display: none;
}
.close {
cursor: pointer;
color: red;
}
#MagJS remote storage Api - 'mag.store'
Connect to a remote JSON service such as myjson or JsonBlob
##Multiple invocation options
There are several ways in which to use mag.store within mag modules
###Called within a module (like within this example)
```javascript
props.todos = mag.store('4ky1b');
props.todos.subscribe(function(state) {
console.log('state', state);
})
this.todos = props.todos.find();
```
###Called on a module definition
```javascript
var app = mag.store('todos', mod, props);
app();
```
###Called on a already created module mag.create
```javascript
var app = mag.create('todos', mod);
mag.store('todos', app, props);
```
###Called directly
```javascript
var storeApi = mag.store('1t5d7');
storeApi.subscribe(function(state){
console.log('state', state);
})
storeApi.find({name:"test"}).then(function(data){
console.log(data)
});
```