Javascript 使用iron路由器从Meteor生成独立SVG

我想通过Meteor，使用Iron路由器，为动态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>

---

问题：我如何告诉Meteor或Iron Router不要生成周围的

…

结构，并将SVG识别为一个新的结构

您不能让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}}

）填充数据：

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

---

根据@HubertOG的回答和我提出的另一个方法，即仅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

的子目录中，

。/

似乎不起作用。

我刚刚在Meteor 0.9.0中尝试过这一点：我的浏览器在渲染某些内容之前一直在刷新

curl

输出的内容看起来像普通的Meteor网站。我需要添加一些包还是什么？你能澄清一下你的解决方案应该如何工作吗？当然，哪个部分不清楚？简而言之，您创建了一个中间件，在Meteor接管并发送其HTML包装之前，它将使用完整的SVG文件响应客户端请求。我想这很清楚，但我无法让它工作：如上所述，我尝试打开的页面不会停止重新加载（例如

http://localhost:3000/svg/foobar

每秒重新加载几次）现在我设法在它死之前看到，在控制台中它说

TypeError:WebApp.connectHandlers是未定义的

curl localhost:3000/svg/foobar

只输出普通的Meteor网站（

…

）。对我有用，请查看最小repo:

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)