Need help PLS: Meteor and Famous Integration and Form Creation

I am currently using Meteor 0.9.2.2. I'm trying to better understand how to create a shape in Meteor + Famous without adding every shape element to a known surface.

I am using "gadicohen: known-views 0.1.7" and "mjnetworks: known 0.2.2"

I am using https://github.com/gadicc/meteor-famous-views and looked at some of the sample events. I can generate events in the view but seem to have lost the ability to generate events using JQuery (probably the famous alarm bells) for fields in the template.

(Note that I am trying to accomplish What is the recommended way to get the data in your meteor template from the front-end for a known surface? But that just directed me to the examples I am following - sorry, still stuck)

For example, if I wanted to have a "blur" event when the contenteditable field was changed and used to update the database, I'm not sure how.

By the way, I am bringing the template through Iron-router:

this.route('someTemplate', {
    path: '/',
});

      

        
        
        
      

    

Here is some sample code I was playing with:

<template name="someTemplate">

    {{#Scrollview  target="content" size="[undefined,100]"}}

        {{#Surface class="green-bg"}}
            <h4 id="main-edit-title" class="editable"  data-fieldname="title" data-resourceid="{{_id}}" contenteditable=true>Heading</h4>

            <p id="main-edit-message" class="mediumEditable editable" data-fieldname="message" data-resourceid="{{_id}}" contenteditable=true>Summary</p>
        {{/Surface}}
    {{/Scrollview}}

 </template>


Template.someTemplate.events({

   'blur .editable': function (e) {
       e.preventDefault();
       //e.stopPropagation();
       var item = $(e.currentTarget);
       DO SOME UPDATE STUFF TO THE DATABASE
       item.removeClass('resourceUpdated');
 },

});

      

        
        
        
      

    

I looked at "famous" too and it didn't seem to work. Those. no events were triggered, and it would only be at surface level, not at field level.

At the view level, I was fine and the code below worked fine:

Template.someTemplate.rendered = function() {
    var fview = FView.from(this);
    var target = fview.surface || fview.view._eventInput;
    target.on('click', function() {
        clickeyStuff(fview);
    });
}

      

        
        
        
      

    

I tried other options from this page: https://famous-views.meteor.com/examples/events

So the main questions I think are: do I need to move each form element to a known surface? It would be a killer. I hope I can still use JQuery or access the DOM for content in the template. Note that I see stuff in the famous FAQ http://famo.us/guides/pitfalls that says don't touch the DOM ... so happy to know how else am I supposed to do this ???