Как использовать партиалы ractivejs с именем переменной?

Я использую 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?


template-engine ractivejs
person Phrearch    schedule 05.03.2014    source источник

Ответы (3)


arrow_upward
4
arrow_downward

В настоящее время партиалы так не работают — каким бы ни было значение 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 );
});
person Rich Harris    schedule 06.03.2014
comment
Эй, спасибо за быстрый ответ! Первый вариант для меня немного проблематичен, так как мне нужно жестко закодировать количество страниц. - person Phrearch; 07.03.2014
comment
@Rich - разве раньше нельзя было установить this.template в beforeInit? Это не работает сейчас, но, может быть, я воображаю, что это когда-то работало... - person martypdx; 07.03.2014
comment
@martypdx хороший вопрос, не помню. Это то, что могло измениться незаметно для всех, потому что (если бы это работало) это был побочный эффект, а не преднамеренная функция, и не было бы никаких тестов. Я вижу, как это может быть полезно, хотя... - person Rich Harris; 07.03.2014

arrow_upward
2
arrow_downward

Одним из вариантов было бы создать основной шаблон как компонент:

<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/.

person martypdx    schedule 07.03.2014

arrow_upward
0
arrow_downward

Мне нужно только, чтобы он работал так же, как на стороне сервера, поэтому у меня это тоже работает нормально:

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>
person Phrearch    schedule 06.03.2014