CODEWITHSUNDEEP
ractivejs
Matt Searles
Matt Searles

Reputation: 2765

How to select a template conditionally with Ractive

I'm trying to select a template conditionally. My idea was that I'd be able to have a container (view) with a list of components, where each component would state which template it should use.

{{#view.components}}
   {{> {{template.id}} }}
{{/view.components}}

What I'd like to happen is for the partial declaration to resolve {{template.id}} from the component property called id, then resolve the partial.

i.e.

view.components[0].template.id = "fooTemplate" (<script id="fooTemplate" />)
view.components[1].template.id = "barTemplate" (<script id="barTemplate" />)

and ractive to resolve the #view.components block as

{{>fooTemplate}}
{{>barTemplate}}

This {{>template.id}}, tells me it can't resolve template.id. This {{>{{template.id}} }} tells me it doesn't know anything about t.

Any workaround I could use?

Upvotes: 2

Views: 373

Answers (2)

fengyj
fengyj

Reputation: 75

You can define your template as below: 

   {{#view.components}}
      {{#FooTemp}}
        {{>fooTemplate}}
      {{/FooTemp}}
      {{#BarTemp}}
        {{>barTemplate}}
      {{/BarTemp}}
    {{/view.components}}

and your model is like:

{
  view: {
    components: [
      {
        FooTemp: { ... }
      },
      {
        BarTemp: { ... }
      }
    ]
   }
}

Upvotes: 0

Johann Echavarria
Johann Echavarria

Reputation: 9945

Take a look to the docs: http://docs.ractivejs.org/latest/partials in "Injecting partials".

You could do something like this in the partials:

ractive = new Ractive({
  el: myContainer,
  template: myTemplate,
  partials: {
    content: anyBooleanExpression ? fooTemplate: barTemplate,        
  }
});

You can use the same conditional in the template property:

template: anyBooleanExpression ? fooTemplate: barTemplate,

And even to use more complex conditionals adding a swich block or an anonymous function.

template: function(){ /* you complex logic */ },

Like in this fiddle

Upvotes: 1

Related Questions