javascript - Meteor- Use a Blaze template in a React template from a route -


i developing reactive web app through meteor utilizing templates:tabs package, designed create tabular interface. plan on displaying data table within these tabs , sending queries different databases depending on tab selected similar cars.com.

the app has flowrouter links 2 different routes, , want tabs present 1 of them. router wish have displaying tabs follows.

#router.jsx flowrouter.route('/', { action() {     mount(mainlayout, {       content: (<landing />)     }   ) } }); 

i need create following template: template name="mytabbedinterface">

#tabs.html {{#basictabs tabs=tabs}} <div>     <p>here's content <strong>first</strong> tab.</p>  </div>  <div>    <p>here's content <strong>second</strong> tab.</p>  </div>  <div>    <p>here's content <strong>third</strong> tab.</p>  </div>    {{/basictabs}}  </template> 

here js file has helpers template.

 #mytabbedinterface.js  reactivetabs.createinterface({   template: 'basictabs',   onchange: function (slug, template) {     // callback runs every time tab changes.     // `template` instance unique per {{#basictabs}} block.     console.log('[tabs] tab has changed! current tab:', slug);     console.log('[tabs] template instance calling onchange:', template);   } });  template.mytabbedinterface.helpers({   tabs: function () {     // every tab object must have name , slug!     return [       { name: 'first', slug: 'reports' },       { name: 'second', slug: 'sources' },       { name: 'third', slug: 'feedback' }     ];   },   activetab: function () {     // use optional helper reactively set active tab.     // have return slug of tab.      // can set using iron router param if want--     // or session variable, or reactive value anywhere.     // if don't provide active tab, first 1 selected default.     // see `advanced use` section below learn dynamic tabs.     return session.get('activetab'); // returns "first", "second", or "third".   }  }); 

lastly, here file "landing" routes router want template called:

#landing.jsx `import {blaze} 'meteor/blaze'; import react, {component} 'react'; import { meteor } 'meteor/meteor';  export default class landing extends component{    render(){   return(     <div>    //want render template here   </div>       )   }  }` 

so how possible render (blaze) template in html in react render? thank you.

i suggest not using blaze package solve react problem. i'm aware not asked, maybe helps.

implementing tabbed ui simple task, mixing react , blaze isn't worth it. nice library solve problem react-bootstrap, implements several useful react components <tab>:

<tabs>   <tab title="apples">apple content</tab>   <tab title="pears">pear content</tab>   <tab title="melons">melon content</tab> </tabs> 

but if wish walk road, try blazetoreact.


Comments

Popular posts from this blog

javascript - Slick Slider width recalculation -

jsf - PrimeFaces Datatable - What is f:facet actually doing? -

angular2 services - Angular 2 RC 4 Http post not firing -