Geek asks and answers

How to use Bootstrap.Tabs from ember-bootstrap project correctly?

I am trying to use the Bootstap.Tabs component to create bootstrap tabs.

I declared tabs as follows:

{{view Bootstrap.Tabs
  contentBinding="App.tabsContent"
  selectionBinding="App.selection"}}

And I use the following code to set the content for tabs.

App.ready = function() {
  App.tabsContent= Ember.A([{value: "cred_app.associate_clients", title: "Associate clients"}, {value: "cred_app.facilities", title: "Facilities"}]);    
};

Using this, I can successfully complete the boot tab .. and the route name will appear in App.selection.

I just don’t understand how to make links work so that the controller jumps to the route. I would also like to get an active tab to apply the correct css to it so that the tabs display which route is currently being displayed.

UPDATE:

I implemented this using a more simplified approach:

<ul class='nav-tabs'>
  {{#linkTo 'cred_app.associate_clients' model tagName='li' href=false}}
    {{#linkTo 'cred_app.associate_clients' model}}Client Hierachy{{/linkTo}}
  {{/linkTo}}
</ul>
+5
source share
2 answers

- : ( Bootstrap.Tabs )

{{#view Bootstrap.TabContainerView currentView="patient"}}
  <ul class="nav nav-tabs">
    {{#view Bootstrap.TabView value="patient"}}<a>Patient</a>{{/view}}
    {{#view Bootstrap.TabView value="visits"}}<a>Visits</a>{{/view}}
    {{#view Bootstrap.TabView value="contacts"}}<a>Contacts</a>{{/view}}
    {{#view Bootstrap.TabView value="sessions"}}<a>Sessions</a>{{/view}}
   </ul>
   {{#view Bootstrap.TabPaneView viewName="patient"}}
     {{render "patient"}}
   {{/view}}
   {{#view Bootstrap.TabPaneView viewName="visits"}}
     {{render "visits"}}
   {{/view}}
   {{#view Bootstrap.TabPaneView viewName="contacts"}}
     {{render "contacts"}}
   {{/view}}
   {{#view Bootstrap.TabPaneView viewName="sessions"}}
     {{render "sessions"}}
   {{/view}}
{{/view}}

:

<ul class="nav nav-tabs">
  {{#view Bootstrap.TabItem item="patient"}}
    {{#linkTo "tab.patient" content}}Patient{{/linkTo}}
  {{/view}}
  {{#view Bootstrap.TabItem item="visits"}}
    {{#linkTo "tab.visits" content}}Visits{{/linkTo}}
  {{/view}}
  {{#view Bootstrap.TabItem item="contacts"}}
    {{#linkTo "tab.contacts" content}}Contacts{{/linkTo}}
  {{/view}}
  {{#view Bootstrap.TabItem item="sessions"}}
    {{#linkTo "tab.sessions" content}}Sessions{{/linkTo}}
  {{/view}}
</ul>
{{outlet}}

Bootstrap.TabItem, linkTo

Bootstrap.TabItem = Ember.View.extend({
  tagName: 'li',
  classNameBindings: ['active'],

  activeChanged: function () {
    var self = this;
    Ember.run.next(this, function () { //delay
      if (!self.isDestroyed) {
        self.set('active', self.get('childViews.firstObject.active'));
      }
    });
  }.observes('childViews.firstObject.active') //get the active state from the linkTo helper
});

, - :

App.Router.map(function (match) {
  ...
  this.resource('tab', { path: '/tab' }, function () {
    this.route('patient');
    this.route('visits');
    this.route('contacts');
    this.route('sessions');
  });
  ...
});

a jsFiddle

+3

Bootstrap Ember

:

https://github.com/ember-addons/bootstrap-for-ember

: ember-addons.imtqy.com/bootstrap-for -ember

+1

More articles:


All Articles