Rendr 如何在 RendrJS 同构框架中将模型传递给子视图

Question

假设我正在构建一个博客，其中主页呈现博客列表 post。我的问题是如何将模型传递给每个子 post 视图？

我有一个index.hbs遍历集合

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

我有一个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';

但是 post_view.js 中似乎没有设置模型。如果我在 {{forEach}} 循环中执行 {{json value}}，我可以看到打印的 JSONified 输出。我需要做什么来传递模型，是否需要在视图中手动构建它？谢谢！

Answer 1

这就是我们一直在做的事情，它很好地进一步抽象了它，以便我们可以重新使用 'list' 组件。

主页控制器

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 列表模板 (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}}

Post 项目模板 (posts/item.hbs)

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

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

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

Answer 2

我没有资格发表评论，但这不是答案。

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

Answer 3

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

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

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

 jsonKey: 'stories'

这解决了我的问题。

Rendr 如何在 RendrJS 同构框架中将模型传递给子视图

Rendr how to pass model to subview in RendrJS isomorphic framework

javascript

rendr

主页控制器

页面级模板（例如主页）

Posts 列表模板 (posts/list.hbs)

Post 项目模板 (posts/item.hbs)