0

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.

質問:<html>... Meteor または Iron-Router に周囲の構造を生成せず、SVG をスペースバーの最上位要素として認識させるにはどうすればよいですか?

4

2 に答える 2

2

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',
});
于 2014-08-25T12:33:51.293 に答える
0

@HubertOG の回答とIronRouter のドキュメントwhereに基づいて、とactionオプションの両方を使用して、IronRouter のみである別のアプローチを思いつきました。

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があり、../機能していないようです。

于 2014-09-01T14:40:37.077 に答える