使用 Iron-router 从 Meteor 生成独立的 SVG答案

【问题标题】：Generate stand-alone SVG from Meteor with iron-router使用 Iron-router 从 Meteor 生成独立的 SVG
【发布时间】：2014-10-18 10:47:13
【问题描述】：

我想使用 Iron-Router 通过 Meteor 提供具有模板功能的动态 SVG 文件。

我先设置了一条新路线：

@route 'svg', {
   path: '/svg/:name'
   data: -> { name: this.params.name } # sample data
   layoutTemplate: 'svg'
}

还有一个模板：

<template name="svg">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
      xmlns:dc="http://purl.org/dc/elements/1.1/"
      xmlns:cc="http://creativecommons.org/ns#"
      xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      width="500"
      height="500"
      id="svg2">
  <defs
        id="defs4" />
  <metadata
        id="metadata7">
    <rdf:RDF>
      <cc:Work
            rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
              rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
        transform="translate(0,-552.36218)"
        id="layer1">
    <text
     x="55.067966"
     y="838.08844"
     id="text2985"
     xml:space="preserve"
     style="font-size:108.92150116px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Source Sans Pro;-inkscape-font-specification:Source Sans Pro"><tspan
       x="55.067966"
       y="838.08844"
       id="tspan2987">{{name}}</tspan></text>
    </g>
  </svg>
</template>

然后我浏览到http://localhost:3000/svg/foobar，我得到了这个（在浏览器中）：

Your app is crashing. Here's the latest log.

=> Errors prevented startup:

While building the application:
client/infrastructureViews/svg.html:2: Expected tag name after `<`
<?xml version="1.0" e...
 ^

=> Your application has errors. Waiting for file change.

问题：如何告诉 Meteor 或 Iron-Router 不生成周围的 <html>... 结构并将 SVG 识别为 spacebars top-level element？

【问题讨论】：

标签： javascript svg meteor iron-router spacebars

【解决方案1】：

您不能让 IR 这样做，但您可以进入手动模式并自己生成响应。

首先告诉路由器某条路径将在服务器端进行管理：

this.route('svg', {
  path: '/svg/:name',
  where: 'server'
});

然后在服务器端创建一个中间件来管理你的响应：

WebApp.connectHandlers.stack.splice (0, 0, {
  route: '/svg',
  handle: function(req, res, next) {
    var name = req.url.split('/')[1];    // Get the parameter
    new Fiber(function () {              // Packing in Fiber is unnecessary,
                                         // unless you want to connect to Mongo
      res.writeHead(200, {'Content-Type': 'text/plain',});
      res.write('Example output');
      res.end();
    }).run()
  },
});

请注意，您不会在服务器端安装模板引擎。解决此问题的最简单方法是将您的 svg 文件放入 /private 文件夹，将其作为文本资源获取，然后使用下划线模板格式（因此 <%= name %> 而不是 {{name}}）填充数据：

var template = Assets.getText('file.svg');
var output = _.template(template, {
  name: 'name',
});

【讨论】：

我刚刚在 Meteor 0.9.0 中尝试过：我的浏览器一直在刷新整个时间之前甚至渲染某些东西。 curl 输出的东西看起来很像普通的 Meteor 网站。我需要添加一些包吗？
您能否说明您的解决方案应该如何工作？
当然，哪一部分不清楚？简而言之，您创建一个中间件，该中间件将在 Meteor 接管并发送其 HTML 包装之前使用完整的 SVG 文件响应客户端请求。
我想这很清楚，但我无法让它工作：如上所述，我尝试打开的页面并没有停止重新加载（例如http://localhost:3000/svg/foobar每秒重新加载几次）现在我设法在它死之前看到它，在控制台中显示TypeError: WebApp.connectHandlers is undefined。 curl localhost:3000/svg/foobar 只是输出常规 Meteor 网站 (<html>...)。
为我工作，查看最小回购：github.com/subhog/stackoverflow-25483299

【解决方案2】：

基于@HubertOG 的回答和IronRouter documentation，我想出了另一种方法，即仅限IronRouter，同时使用where 和action 选项：

Router.map ->
  @route 'svg',
    path: '/svg/:name'
    where: 'server'
    action: ->
      svgTemplate = Assets.getText('svg/drawing.svg')
      svg = _.template(svgTemplate, { name: @params.name })
      @response.writeHead(200, {'Content-Type': 'image/svg+xml'})
      @response.end(svg)

相应的 SVG 文件必须存储在 /private 的子目录中，../ 似乎不起作用。

【讨论】：