Where to put a separate admin interface for a Meteor app?

后端未结

关注

 6  1159

I\'m trying to build a smart package for Meteor app that provides some monitoring capabilities and other tools based on the features of the smart package. For more details read

相关标签:

6条回答

迷失自我

2021-02-14 09:32

IronRouter supports multiple layouts.

https://github.com/EventedMind/iron-router

Router.configure({
  layout: 'layout',
  notFoundTemplate: 'notFound',

  loadingTemplate: 'loading',

  renderTemplates: { 
    /* render the templated named footer to the 'footer' yield */
    'footer': { to: 'footer' },

    /* render the template named sidebar to the 'sidebar' yield */
    'header': { to: 'header' }
  }
});

Router.map(function() { 

  this.route('admin', {
    layout: 'admin_layout',
    path: '/admin',
    template: 'admin',
    data: function() {
      return { page : 'admin'}
    },
    onBeforeRun: checkLoggedIn,
    renderTemplates: { 
    /* render the template named footer to the 'footer' yield */
    'admin_footer': {to: 'footer'},

    /* render the template named sidebar to the 'sidebar' yield */
    'admin_login_header': {to: 'header'}
    }
  });

this.route('home', {
    path: '/',
    template: 'home',
    data: function() {
      return { page : 'home'}
    }
  });


<template name="layout">
//this is where your standard view layout goes

</template>

<template name="admin_layout">
//this is where your admin view layout goes

</template>

Could work pretty well if you match it up with Meteor accounts UserID checks and onBeforeRun hooks. I haven't fully tested the security aspect but it looks like it will work.

0 讨论(0)

旧巷少年郎

2021-02-14 09:32

Please take a look at my project at github. I have a solution for this. It might not be the best, but it is working so far.

github.com/voteapp

<head>
    <title>Index</title>
</head>

<body>
    {{> root}}
</body>

root template is using some other templates inside. I may use 2 different index files. 1 for site and 1 for management panel.

root template:

<template name="root">
    {{#if adminURL}}
        {{> adminLogin}}
    {{else}}
        {{> site}}
    {{/if}}
</template>

adminLogin template:

<template name="adminLogin">
    {{#if currentUser}}
        {{> management}}
    {{else}}
        admin login page.
            <div style="float: right">
              {{loginButtons align="right"}}
            </div>
    {{/if}}
</template>

management template:

<template name="management">
    <div id="header" class="navbar">
       ....
    </div>
    <div id="container" class="row-fluid">
       ....
    </div>

    <link rel="stylesheet" href="/css/admin.css">
</template>

site template:

<template name="site">
     <h1>Hello World!</h1>

     <link rel="stylesheet" href="/css/site.css">
</template>

This is not actually html from my project but it is something like this. With this way, CSS links will appear at the end of body tag. And for admin panel and site itself will have different html structure and css files. Also you may want to add javasctipt files also.

0 讨论(0)

佛祖请我去吃肉

2021-02-14 09:38

Isn't this doable by simply using Meteor router and template helpers:

Specify your routes:

Meteor.Router.add({
    '/foo'  : 'foo',
    '/admin': 'admin'
});

Let's say you have a 3 column layout. Create your template like this:

<template name="body">
  <div class="container">
    <div class="span"4>
      {{renderPage LeftLayoutName}}
    </div>
    <div class="span"4>
      {{renderPage MiddleLayoutName}}
    </div>
    <div class="span"4>
      {{renderPage RightLayoutName}}
    </div>
  </div>      
</template>

Then specify your template helpers:

Template.body.helpers({
  LeftLayoutName: function() {
    switch (Meteor.Router.page()) {
      case 'foo':
        return 'foo_left';
      case 'admin':
        return 'admin_left';
    }
  },
  MiddleLayoutName: function() {
    switch (Meteor.Router.page()) {
      case 'foo':
        return 'foo_middle';
      case 'admin':
        return 'admin_middle';
    }
  },
  RightLayoutName: function() {
    switch (Meteor.Router.page()) {
      case 'foo':
        return 'foo_right';
      case 'admin':
        return 'admin_right';
    }
  }
});

0 讨论(0)

后悔当初

2021-02-14 09:49

Hi & thanks for referencing observatory! You are completely right in that eventually it would be nice to have management & monitoring separately and in fact we've been working in that direction lately, and this is going to be a primary direction as well - the goal is to monitor, analyze logs and provide some management capabilities in the cloud. It already has some basic functionality - check it out here: http://vega.observatoryjs.com/demo

BTW, the way we handled your problem in original observatory - just create a separate route in Pages or Iron Router etc and put just the observatory (or your admin panel) template there - in our case {{>logs_bootstrap}}. This way it'll be completely separate from the main app. But cloud is even better :)

0 讨论(0)
发布评论:

提交评论
- 加载中...
离开以前

2021-02-14 09:50
As James Hatfield pointed out, Iron-Router now supports multiple layouts. For those hitting this thread now, this is the best way to handle the multiple layout scenario.
```
Router.map ->
  @route 'home',
    layoutTemplate: 'homeLayout'
    path: '/'

  @route 'dashboard',
    layoutTemplate: 'dashboardLayout'
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
野趣味

2021-02-14 09:54

I had a similar question. There is less clunky example of doing this in the router meteor package example.

https://github.com/tmeasday/meteor-router/tree/master/examples/app-with-layout

Hope this helps.

0 讨论(0)
发布评论:

提交评论
- 加载中...