Question

我想使用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？

Answer 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',
});

Answer 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的子目录中，而../似乎无法正常工作。

使用铁路由器从Meteor生成独立的SVG

2 个答案: