0

更新：2014年2月の時点で、MeteorはリアクティブSVGをサポートしているため、回避策は必要ありません。

流星0.5.9

コレクション内のドキュメントごとに1つずつ、図形のグループを作成したいと思います。テンプレートで一度に1つずつ図形を作成できますが、{{＃eachloop}}の内部では作成できません。

これは機能します：

<Template name="map">
  <svg viewBox="0 0 500 600" version="1.1">
    <rect x="0" y="0" width="100" height="100" fill={{color}}/>
  </svg>
</Template>

Template.map.color = function() {
  return "green";
};

これはしません：

<Template name="map">
  <svg viewBox="0 0 500 600" version="1.1">
    {{#each colors}}
      <rect x="0" y="0" width="100" height="100" fill={{color}}/>
    {{/each}}
  </svg>
</Template>

Template.map.colors = function() {
  return [{color: "red"}, {color: "blue"}];
}

{{#each}}を使用して内部で作成しようとしたものは、Meteorによってテンプレートを介して挿入された属性を使用しても、手動で作成できたとしても、表示されません。

また、単一のオブジェクト{color： "red"}をテンプレートに送信して{{#withcolors}}を使用してみましたが、それも機能しません。SVGに加えて、情報がテンプレートに正しく到達することを確認するために、テンプレートにプレーンsを追加しました。これらはすべて、{{＃each}}と{{#with}}で期待どおりに機能しています。

私がやろうとしていることを私はできるべきですか？

4

3 に答える 3

3

（2013年4月1日更新）

ハンドルバーとJavascriptによる挿入を組み合わせる方法を見つけました。これを理解するために、このブログエントリを信用する必要があります：http： //nocircleno.com/blog/svg-and-handlebars-js-templates/

次の2つのファイルを作成し、それらを新しいMeteorディレクトリのクライアントフォルダー内に配置すると、htmlが正常に取得されました。

Testing.js：

<head>
  <title>testing</title>
</head>

<body>
</body>

<template name="map">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    {{#each colors}}
      <rect x="0" y="{{yPosition}}" width="100" height="100" fill="{{color}}"/>
    {{/each}}
  </svg>
</template>

Testing.html：

(function () {

  var count = 0;

  Template.map.yPosition = function() {
    count++;
    return (count-1) * 100;
  };  

  Template.map.colors = function() {
    return [{color: "red"}, {color: "blue"}];
  };

  Meteor.startup(function() {
    var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svgElement.width = 500;
    svgElement.height = 600;
    document.getElementsByTagName("body")[0].appendChild(svgElement);
    var svgFragment = new DOMParser().parseFromString(Template.map(), "text/xml");
    svgElement.appendChild(svgFragment.documentElement);
  }); 

})();
于 2013-03-31T14:47:24.313 に答える
2

Meteor要素とSVG要素を実験して同じ問題に遭遇し、要素を追加して、以下の2つの方法でそれらを表示できることを発見しました。1つのオプションは<svg></svg>、次のように、各ループの要素をでラップすることです。

<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
{{#each pieces}}
  <svg xmlns="http://www.w3.org/2000/svg"><circle cx="{{x}}" cy="{{y}}" r="1" fill="{{color}}"></circle></svg>
{{/each}}
</svg>

別のオプションは、（テンプレートレンダリングで）挿入する要素を含むjQueryを使用してsvg要素を作成し、jQueryを使用してその内部要素を取得し、そのように（coffeescriptで）すでにDOMにあるsvg要素に挿入することです。 ：

for piece in Pieces.find().fetch()
  $el = $("<svg><circle cx='#{piece.x}' cy='#{piece.y}' r='1' class='a'></circle></svg>")
  $el.find('circle').appendTo @$('svg')

d3やRaphaelJSなどを使用して挿入を行うこともできます。コレクションオブザーバーのコールバックでd3のようなライブラリを使用することで、個々の要素をコレクションに反応させ、簡単にアニメーション化することもできます（ここでも、coffeescript）。

Pieces.find().observe {

  added: (piece)=>
    # using jquery (could use d3 instead)
    $el =  $("<svg><circle cx='#{piece.x}' cy='#{piece.y}' r='1' fill='#{piece.color}' data-id='#{piece._id}'></circle></svg>")
    $el.find('circle').appendTo @$('svg')

  changed: (newPiece, oldPiece)=>
    # using d3 to animate change
    d3.select("[data-id=#{oldPiece._id}]").transition().duration(1000).attr {
      cx: newPiece.x
      cy: newPiece.y
      fill: newPiece.color
    }

  removed: (piece)=>
    @$("[data-id=#{piece._id}]").remove()
}

これらの方法は、Mac上の最新のChrome、Safari、Firefoxブラウザーで機能するようですが、他のブラウザーではテストしていません。

于 2013-05-11T21:49:18.740 に答える
1

「 Blazeの使用」ページによると、Blazeがリリースされると、MeteorはSVGのファーストクラスのサポートを利用できるようになります。

于 2014-03-13T13:02:58.880 に答える