Question

我使用ractivejs在服务器和客户端上呈现html。我希望有一个索引页面作为ractivejs实例，其中可以根据变量名称呈现页面模板，如：

this.ractive = new Ractive({
  template: _GLOBAL.templates.index,
  partials: _GLOBAL.templates,
  data: {
    context: context,
    getPage: function () {
      /** Should return rendered partial, or something that will end up as {{> myPartialName}} in index */
      return '> home';
    }
  }
})

目前ractivejs有可能吗？

Answer 1

目前，部分人不会这样做 - 无论创建实例时ractive.partials.myPartialName的价值是什么，都会代替{{>myPartialName}}呈现。

更改部分后期渲染是可以添加到未来版本的内容，因为它不止一次出现。

但暂时是您最好的选择，如果您在多个页面中使用单个实例，则可能是这样的：

{{# page === 'home' }}
  {{>home}}
{{/ page === 'home' }}

{{# page === 'admin' }}
  {{>admin}}
{{/ page === 'admin' }}

{{# page === 'whatever' }}
  {{>whatever}}
{{/ page === 'whatever' }}

然后在页面之间切换会发生如下：

ractive.set( 'page', 'home' );

// or, if there were transitions involved - e.g. one page flies out,
// the other flies in
ractive.set( 'page', null, function () {
  ractive.set( 'page', home );
});

Answer 2

一种选择是将主模板创建为组件：

<script type='text/ractive' id="main">
   <h1>Main Page</h1>
     {{>content}}
   <div> footer </div>
</script>

然后使用它来包装每个页面模板：

<script type='text/ractive' id="page1">
    <main>
        <p>I am page 1</p>
    </main>
</script>

您可以只渲染页面模板：

new Ractive({
    template: template //'#page1', '#page2, etc
}).toHTML()

请参阅：http://jsfiddle.net/3yjMj/

Answer 3

我只需要像服务器那样工作，所以这对我来说似乎也适用：

res(peer.getSnapshot(_GLOBAL.templates.home, context))

getSnapshot: function(template, context) {
    var Ractive = require('ractive')
    /** Inject a page template in the main template */
    var pageRactive = new Ractive({template: template, data: context})
    this.ractive = new Ractive({
      template: _GLOBAL.templates.index,
      partials: _GLOBAL.templates,
      data: {
        context: context,
        getPage: function () {
          return pageRactive.toHTML()
        }
      }
    })
    return this.ractive.toHTML({})
  }
}


<body>
  {{{getPage()}}}
</body>

如何使用变量名ractivejs partials？

3 个答案: