Rendr how to pass model to subview in RendrJS isomorphic framework

Question

Assume I'm building a blog where the home page renders a list of blog posts. My question is how to pass a model to each child post view?

I have an index.hbs iterating through a collection

{{#forEach models}}
    {{view "post_view" model=value model_name="story"}}
{{/forEach}}

I have a post_view.js

var BaseView = require('./base');

module.exports = BaseView.extend({
     className: 'post_view',

    initialize: function() {
        console.log(this.model); //undefined
        console.log(this.options.model); //undefined on client, logs model attributes on server
    }
});

module.exports.id = 'post_view';

But it appears the model isn't set inside the post_view.js. If I do a {{json value}} inside the {{forEach}} loop I can see the JSONified output printed. What do I need to do to pass a model, do I need to manually construct it inside the view? Thanks!

Answer 1

The answer ended up being the improper use of the parse() method. My original stories collection had a property like this

parse: function(rsp) {
    return rsp.stories;
}

Because the API response contained some metadata as well as an array of stories under the "stories" key. I removed that parse method and instead added

 jsonKey: 'stories'

Which resolved my problem.

Answer 2

This is how we've been doing it which has worked well to abstract it a bit further so that we can re-use a 'list' component.

Home Page Controller

index: function(params, callback) {
    var spec = {
        posts: {
            collection: 'Posts',
            params: params
        }
    };
    this.app.fetch(spec, function(err, result) {
        callback(err, result);
    });
}

A Page-level template (eg, home)

<section class="container">
    <h2>Recent Posts</h2>
    {{view "posts/list" collection=posts}}
</section>

Posts List Template (posts/list.hbs)

<div class="media-list">
    {{#each _collection.models}}
        {{view "posts/item" model=this}}
    {{/each}}
</div>

OR if using forEach

{{#forEach _collection.models}}
    {{view "posts/item" model=value}}
{{/forEach}}

Post Item Template (posts/item.hbs)

<div class="media">
  <div class="media-body">
    <h4 class="media-heading">{{title}}</h4>
    {{description}}
  </div>
</div>

I also have this link that I use to try to put together conventions that have worked for us:

https://github.com/crwang/rendr-conventions

Answer 3

I don't have the reputation to comment, but this isn't an answer.

When the subview is initialized often model isn't there yet. It'll certainly be there by postRender() and should be there for getTemplateData(). I don't remember the exact issue with the {{view}} plugin that caused this race condition, but it is something that I've certainly seen before. The wormhole is somewhere around here: https://github.com/rendrjs/rendr/blob/master/shared/base/view.js#L438 and is something that works on the server but not always on the client.