Trying to use zclip in Meteor app

Question

Can't seem to use zclip in my simple Meteor clipboard app: http://commandc.meteor.com

I thought I was missing something in terms of how meteor was loading jquery, zclip, and the copying script, so I moved everything into html and used external sources. Still, copying doesn't work. Very similar code working here: http://jsbin.com/uladis/7/edit

PS: I know I have another problem copying text of just the correct element, rather than all p tags. Not worrying about that yet.

EDIT: Using Akshat's method below gives this exception for each instance of copy:

Exception from Meteor._atFlush: TypeError: Object [object Object] has no method 'zclip' at Object.Template.copy.rendered (http://localhost:3000/command-c.coffee.js?78eccd42fde3d566da961e73c1ab9f4ad83a4e26:18:35) at Spark.createLandmark.rendered (http://localhost:3000/packages/templating/deftemplate.js?91fdd4353cca922f7a59ff593d000211c2857c84:125:44) at http://localhost:3000/packages/spark/spark.js?c202b31550c71828e583606c7a5e233ae9ca50e9:386:32 at Array.forEach (native) at Function._.each._.forEach (http://localhost:3000/packages/underscore/underscore.js?47479149fe12fc56685a9de90c5a9903390cb451:79:11) at http://localhost:3000/packages/spark/spark.js?c202b31550c71828e583606c7a5e233ae9ca50e9:384:7 at http://localhost:3000/packages/deps/deps-utils.js?f3fceedcb1921afe2b17e4dbd9d4c007f409eebb:106:13 at http://localhost:3000/packages/deps/deps.js?1df0a05d3ec8fd21f591cfc485e7b03d2e2b6a01:71:15 at Array.forEach (native) at Function._.each._.forEach (http://localhost:3000/packages/underscore/underscore.js?47479149fe12fc56685a9de90c5a9903390cb451:79:11)

Answer 1

Ive never used Zclip so hopefully im helpful, including that other correct element problem:

When using <.. id='..' you need to make sure each is unique or else the DOM breaks : Instead of <p id="copy"> use something like <p id="{{_id}}" class="copy">

I try to access the templates data with this.data

Template.copy.rendered = function() {
       $('#' + this.data._id).zclip({
           path:"http://www.steamdev.com/zclip/js/ZeroClipboard.swf",
           copy:this.data.name
       });
    }
}

And so each copy click works use this style of template

HTML:

I've split up the list so that copies is in its own template so the rendered function above can get its own data context

<template name="list">
    {{#each copies}}
       {{>copy}}
    {{/each}
</template>

<template name="copy">
    <p id="{{_id}}" class="copy">{{name}}</p>
</template>

EDIT

1) Add JQuery using Meteor instead of with <script> use the meteor package: In your project directory add JQuery:

meteor add jquery

2) Add the file at http://www.steamdev.com/zclip/js/jquery.zclip.min.js to a folder in your project at client/lib

The error occurs because zclip hasn't yet loaded yet.