2

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?

Van Coding
  • 24,244
  • 24
  • 88
  • 132

1 Answers1

1

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

switz
  • 24,384
  • 25
  • 76
  • 101
  • I tried this a short time after you posted your answer, but it didn't make a difference. Since then I was 2-3 times at the freenode web irc but you weren't there. Now I have time to try it again. I'm trying it with the latest version of derby and racer, but still don't get live bindings.. If I understand this right, the model.subscribe function should call the passed callback each time the result of the query changes, but it does only get called at page load.. I think that's the problem, not the template (even when I changed it to what you posted). – Van Coding Feb 12 '13 at 15:07
  • I got it to work. I needed to reference the posts object using model.ref('_posts',post) and then iterating trough this in the template. If you add this to your anser, I'll accept it :) – Van Coding Feb 12 '13 at 15:28