خرید بک لینک

Vote count: 0

I am currently developing a reactive web app through meteor that is utilizing the templates:tabs package, which is designed to create a tabular interface. I plan on displaying a data table within these tabs and sending queries to different databases depending on which tab is selected similar to cars.com.

The app already has a FlowRouter which links to two different routes, and I only want the tabs to be present for one of them. The router I wish to have displaying the tabs is as follows.

#router.jsx
FlowRouter.route('/', {
action() {
    mount(MainLayout, {
      content: (<Landing />)
    }
  )
}
});

I need to create the following template: template name="myTabbedInterface">

#Tabs.html
{{#basicTabs tabs=tabs}}
<div>


  <p>Here's some content for the <strong>first</strong> tab.</p>

</div>

<div>

  <p>Here's some content for the <strong>second</strong> tab.</p>

</div>

<div>

  <p>Here's some content for the <strong>third</strong> tab.</p>

</div>

  {{/basicTabs}}

</template>

Here is the JS file that has the helpers for the template.

 #myTabbedInterface.js
 ReactiveTabs.createInterface({
  template: 'basicTabs',
  onChange: function (slug, template) {
    // This callback runs every time a tab changes.
    // The `template` instance is 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 a name and a slug!
    retu [
      { name: 'First', slug: 'reports' },
      { name: 'Second', slug: 'sources' },
      { name: 'Third', slug: 'feedback' }
    ];
  },
  activeTab: function () {
    // Use this optional helper to reactively set the active tab.
    // All you have to do is retu the slug of the tab.

    // You can set this using an Iron Router param if you want--
    // or a Session variable, or any reactive value from anywhere.

   // If you don't provide an active tab, the first one is selected by default.
    // See the `advanced use` section below to lea about dynamic tabs.
    retu Session.get('activeTab'); // Retus "first", "second", or "third".
  }
 });

Lastly, here is the file that "Landing" routes to from the router where I want the template to be called:

#Landing.jsx
`import {Blaze} from 'meteor/blaze';
import React, {Component} from 'react';
import { Meteor } from 'meteor/meteor';

export default class Landing extends Component{


 render(){
  retu(


  <div>
   //Want to render template here
  </div>

     )
  }

}`

So how is it possible to render the (Blaze) template in HTML in a React render? Thank you.

asked 19 secs ago

- - , .
.

برچسب: نویسنده: استخدام کار تاريخ: شنبه 26 تير 1395 ساعت: 2:54

صفحه بندی