javascript - 在 Meteor 中使用自定义路由的 Bootstrap 模态

Question

我想在模式和 url 中显示用户设置以具有 /settings/

不确定如何设置它。它是在路由器设置中完成还是在设置链接的点击事件中完成？

我有 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'});

Answer 1

我会做类似于所示的事情 on this post , 有一些修改:

<强>1。为设置创建路由:

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

<强>2。为该路线创建一个模板，例如在 client/views/settings.html 下。

<强>3。将模板放入该文件，但请注意对 projectImageItem 和 projectImageModal 的调用不在正文中，而是在设置模板中:

<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。将事件处理代码放到js文件中，如client/views/settings.js:

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