CODEWITHSUNDEEP
javascripttwitter-bootstrapmeteormodal-dialogrouter
416serg
416serg

Reputation: 448

Bootstrap modal with custom route in Meteor

I'd like to display user settings in a modal and the url to have /settings/

Not sure how to set it up. Is it done in the router setup or is it done in the click event on the settings link?

I have header.html :

<!-- nav stuff -->
<li><a href="{{pathFor 'userSettings'}}" >Settings</a></li>

header.js:

Template.header.events({
  'click #settings-link': function(event){
    event.preventDefault();
    if (!Meteor.user()) {
      Router.go('sign-in');
    } else {
      $("#userModal").modal("show");
    }
  }
});

userSettings.html :

<template name="userSettings">
  <div class="modal fade" id="userModal">
    <!-- Stuff -->
  </div>
</template>

routes.js:

this.route('userSettings', {path: '/settings'});

Upvotes: 2

Views: 1288

Answers (1)

Chip Castle
Chip Castle

Reputation: 2192

I would do something similar to what's shown on this post, with some modifications:

1. Create a route for settings:

this.route('settings', {path: '/settings'});

2. Create a template for that route, such as under client/views/settings.html.

3. Put the templates into that file, but notice how the calls to projectImageItem and projectImageModal are not in the body, but instead inside the settings template:

<template name="settings">
  {{> projectImageItem}}
  {{> projectImageModal}}
</template>

<!-- A modal that contains the bigger view of the image selected -->
<template name="projectImageModal">
  <div class="modal fade in" id="projectImageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Big Image</h4>
        </div>
        <div class="modal-body">
          <img src="{{cfsFileUrl 'bigProjectImage' file=image}}" alt="..." class="img-rounded">
        </div>
      </div>
    </div>
  </div>

4. Put the event handling code into the js file, such as client/views/settings.js:

if (Meteor.isClient) {
  Template.projectImageItem.events = {
    "click .open-modal" : function(e,t) {
      e.preventDefault();
      $("#projectImageModal").modal("show");
    }
  };
}

Upvotes: 1

Related Questions