I'm experimenting with derbyjs and can't figure out how those realtime updates using subscriptions work.
Currently, the app is just an as basic as possible list of post-titles and a textfield at the end where one can add a new post:
<Title:>
Sample derby app
<Header:>
<!-- This is a component defined in the /ui directory -->
<ui:connectionAlert>
<Body:>
<h1>Posts</h1>
<app:postList>
<input type="text" value="{_fieldValue}"><input type="button" value="add" x-bind="click:add">
<postList:>
{{#each posts}}
<app:post>
{{/}}
<post:>
<div>{{title}}</div>
The app has just the "/" route, which should subscribe to all posts. Instead, the callback just gets called the first time the posts are loaded from the database, but not on any changes:
// Derby routes can be rendered on the client and the server
get('/', function(page, model, params) {
model.subscribe(model.query("posts").allPosts(), function(err, posts) {
page.render({
posts:posts.get()
})
})
})
// CONTROLLER FUNCTIONS //
ready(function(model) {
this.add = function(){
model.set("posts."+model.id(),{title:model.get("_fieldValue")});
model.set("_fieldValue","");
}
})
The "getAllPosts()"-motif is defined in the server index.js file:
store.query.expose("posts","allPosts",function(){
return this;
});
What currently happens is, that when I press the "Add"-Button, a new post gets added to the database, but I can only see the post in the list after a manual page refresh. If I open the page 2 times in 2 separate tabs and add a new Post in one tab, the new post does not automatically gets displayed in the other tab.
Did I miss something?
In order to do live bindings, you need to use single brackets.
Try changing <postList:>
to:
<postList:>
{#each posts as :post}
<app:post>
{/each}
<post:>
<div>{:post.title}</div>
I also added as :post
to make sure the path is correct. This avoids a lot of bugs you might run in to.
If this doesn't solve the problem or you have any more questions please join #derbyjs on freenode and message me (switz).