Thirdparty javascript library Pure.js exposed methods causing error

[kingsleyh]

I hope this is the right project to log this.

I'm trying to use opal-jquery with the pure.js (http://beebole.com/pure/documentation/get-started/) library

however when I expose the :render method - I get an error from the pure.js as if it's being triggered when exposed.

This is my application.rb

  puts "go"
  Document.ready? do  
   require "opal"
   require 'jquery'
   require 'opal-jquery'
   require 'pure.min'
    Element.expose :render
    $q = $global["$"]
    $q.('div.template').render({'site' => 'google','url' => 'http://www.google.com'}, {'a' => 'site', 'a@href' => 'url'})
   end
   puts "done"

and the error:

uncaught exception: pure error: cannot have more than one loop on a target
"cannot have more than one loop on a target" pure.min.js:14

Please let me know if you have any suggestions about this.

[kingsleyh]

looking at the pure.js code - it's possible that the Element.expose(:render) call is not exposing the correct render method as the pure.js code for jquery support looks like this:

jquery:function(){
        jQuery.fn.extend({
            directives:function(directive){
                this._pure_d = directive; return this;
            },
            compile:function(directive, ctxt){
                return $p(this).compile(this._pure_d || directive, ctxt);
            },
            render:function(ctxt, directive){
                return jQuery( $p( this ).render( ctxt, this._pure_d || directive ) );
            },
            autoRender:function(ctxt, directive){
                return jQuery( $p( this ).autoRender( ctxt, this._pure_d || directive ) );
            }
        });
        return function(n, sel){
            return jQuery(n).find(sel);
        };
    },

[elia]

@kingsleyh try this:

require 'pure.min'
require 'native' # adds #to_n
require 'opal-jquery'

Element.expose :render

data = {
  who: 'BeeBole!',
  site: 'http://beebole.com'
}
directive = {
  a: 'who', 
  'a@href'=>'site' 
}

Element.find('div.template').render(data.to_n, directive.to_n)

hashes are not the same as literal js objects

[kingsleyh]

Aha thanks - after a change to the require lines - this works:

require "opal"
require 'jquery'
require 'opal-jquery'
require 'pure.min'
require 'native' # adds #to_n

Document.ready? do

Element.expose :render

data = {
who: 'BeeBole!',
site: 'http://beebole.com'
}
directive = {
a: 'who',
'a@href'=>'site'
}

Element.find('div.template').render(data.to_n, directive.to_n)

end

I assumed the opal magic was translating ruby hashes into the js world.