1

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!

4

3 回答 3

2

我没有评论的声誉，但这不是答案。

子视图初始化时通常model还不存在。它肯定会在那里postRender()并且应该在那里getTemplateData()。我不记得{{view}}导致这种竞争条件的插件的确切问题，但这是我之前肯定见过的东西。虫洞就在附近：https ://github.com/rendrjs/rendr/blob/master/shared/base/view.js#L438 ，它可以在服务器上运行，但并不总是在客户端上运行。

于 2015-11-01T15:34:34.903 回答
1

这就是我们一直在做的事情，它很好地进一步抽象了它，以便我们可以重用“列表”组件。

主页控制器

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

页面级模板（例如，主页）

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

帖子列表模板 (posts/list.hbs)

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

或者如果使用 forEach

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

发布项目模板 (posts/item.hbs)

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

我也有这个链接，我用它来尝试把对我们有用的约定放在一起：

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

于 2015-11-01T14:49:09.193 回答
0

答案最终是对 parse() 方法的不当使用。我原来的故事集有这样的属性

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

因为 API 响应包含一些元数据以及“故事”键下的一系列故事。我删除了该解析方法，而是添加了

 jsonKey: 'stories'

这解决了我的问题。

于 2015-11-05T15:02:25.167 回答