Using Meteor to create SVG in template works, but not in #each loop -

-

update: of february 2014, meteor supports reactive svg, no workaround necessary.

meteor 0.5.9

i create group of shapes, 1 each document in collection. can create shapes 1 @ time in template, not inside of {{#each loop}}.

this works:

<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"; };

this not:

<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"}]; }

anything try create inside of using {{#each}} doesn't show up, though can create them manually, attributes inserted meteor through template.

i tried sending single object {color: "red"} template , using {{#with colors}}, , not work either. in addition svg, i've put plain s templates make sure information gets template correctly, , working expected, {{#each}} , {{#with}}.

should able i'm trying do?

i came across same problem experimenting meteor , svg elements , discovered can add elements , them show 2 methods below. 1 option wrap elements in each loop in <svg></svg>, this:

<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>

another options (on template render) create svg element jquery contains element want insert, use jquery grab inner element , insert svg element in dom, (in coffeescript):

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')

you use d3 or raphaeljs inserting. can make individual elements reactive collection , animate using library d3 in collection observer callbacks (again, 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 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() }

these methods seem work in latest chrome, safari, firefox browsers on mac, haven't tested in others.


Comments

Post a Comment

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

-
i beginner in autocad plugins .i have created array of circle using following code. now, have hatch circles in array .how that??how hatch circles @ once? moreover, how can return hatch method , use hatch objects.sorry language.thanks in advance. [assembly: commandclass(typeof(beamsection.class1))] namespace beamsection { public class class1 { //class1 obj = new class1(); [commandmethod("beamatsupport")] public void addlightweightpolyline() { // current document , database document acdoc = application.documentmanager.mdiactivedocument; database accurdb = acdoc.database; promptpointresult ppr = acdoc.editor.getpoint("\nselect starting point "); var ucs = acdoc.editor.currentusercoordinatesystem; point3d startingpt = ppr.value.transformby(ucs); list<double> radius = new list<double>(); radius.add(0.5);
Read more

ios - UITEXTFIELD InputView Uipicker not working in swift -

-
hello trying pop uipickerview view programmatically when user clicks on textfield. have tried doesn't doing anything. isn't working. nothing happening when click textfield class userprofiletableviewcontroller: uitableviewcontroller,uitextfielddelegate,uipickerviewdelegate,uipickerviewdatasource { var itempicker: uipickerview! = uipickerview() @iboutlet weak var gendertxtfield: uitextfield! var gender = ["male","female"] override func viewdidload() { super.viewdidload() gendertxtfield.delegate = self itempicker!.delegate = self itempicker!.datasource = self itempicker!.backgroundcolor = uicolor.blackcolor() self.gendertxtfield.inputview = itempicker } func numberofcomponentsinpickerview(pickerview: uipickerview) -> int{ return 1 } // returns # of rows in each component.. func pickerview(pickerview: uipickerview, numberofrowsincomponent component:
Read more

Python Pig Latin Translator -

-
so have been working on @ codecademy.com while trying learn python. don't know if blind , can't see why won't work or what. here's code won't let me use. function print variable if had typed in , print "empty" if didn't type anything. print "welcome english pig latin translator!" original = raw_input("what's name?") if len(original) > 0 print original else print "empty" if len(original) > 0 else the above lines contains syntax errors. try: if len(original) > 0: else: note added colons, ( : ).
Read more