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
Post a Comment