0

我正在使用 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 目前可以吗？

4

3 回答 3

4

目前，partials 并不像那样工作 - 无论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 );
});
于 2014-03-06T01:15:25.063 回答
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/

于 2014-03-07T18:50:21.063 回答
0

我只需要它像服务器端一样工作，所以这对我来说似乎也可以：

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>
于 2014-03-06T22:50:34.370 回答