Search code examples
javascriptnode.jsderbyjs

derby - Automatic "refresh" on changes


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?


Solution

  • 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).