Skip to content

Instantly share code, notes, and snippets.

@segphault

segphault/app.js

Created June 15, 2015 20:37
Show Gist options
  • Save segphault/297bbe327f9e5004e1ae to your computer and use it in GitHub Desktop.
Save segphault/297bbe327f9e5004e1ae to your computer and use it in GitHub Desktop.
Download ZIP
Todo list app built with deepstream and RethinkDB
Raw
app.js
var DSServer = require("deepstream.io");
var DSRethinkConnector = require("deepstream.io-storage-rethinkdb");
var server = new DSServer();
server.set("host", "localhost");
server.set("port", 6020);
server.set("storage", new DSRethinkConnector({
port: 28015,
host: "localhost",
splitChar: "/",
defaultTable: "dsdemo"
}));
server.start();
Raw
index.html
<html>
<head>
<script src="bower_components/deepstream.io-client-js/dist/deepstream.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.1/vue.min.js"></script>
</head>
<body>
<div id="todolist">
<ul>
<li v-repeat="items" v-on="click: toggle">
<label>
<input type="checkbox" checked="{{done}}">
{{text}}
</label>
</li>
</ul>
<input type="text" v-model="newItemName" placeholder="New Item">
<button v-on="click: newItem">Add</button>
</div>
<script>
var ds = deepstream("localhost:6020").login();
var list = ds.record.getList("todos");
function wrapRecord(record) {
record.subscribe(function(data) {
for (var prop in data)
if (data.hasOwnProperty(prop))
record.$set(prop, data[prop]);
});
return record;
}
var todo = new Vue({
el: "#todolist",
data: {
items: []
},
methods: {
toggle: function(ev) {
if (ev.target.checked != undefined)
todo.items[ev.targetVM.$index].set("done", ev.target.checked);
},
newItem: function() {
var name = "todos/" + ds.getUid();
var record = ds.record.getRecord(name);
record.set({text: this.newItemName, done: false});
list.addEntry(name);
},
},
ready: function() {
list.subscribe(function(data) {
data.forEach(function(name) {
var record = ds.record.getRecord(name);
record.whenReady(function() {
todo.items.push(wrapRecord(record));
});
});
});
}
});
</script>
</body>
</html>
@alejandropaciotti
Copy link

Hi: toogle function should be:

function(ev) {
          if (ev.target.checked != undefined)
            {todo.items[ev.targetVM.$index].set("done", ev.target.checked)}
          else {
            todo.items[ev.targetVM.$index].set("done", !ev.target.checked)
          }
        }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment