Need help pls: Meteor and Famous integration and creation of forms

Question

I am currently using Meteor 0.9.2.2. I am trying to better understand how to build a form in Meteor + Famous without having to put each form element into a Famous surface.

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

I am using https://github.com/gadicc/meteor-famous-views and have looked at some of the samples of events. I can generate events on the view but seems to have lost the ability to generate events using Jquery (probably Famous alarm bells going off) for fields on the template.

(Note I fid try following What is a recommended way to get data into your meteor template from the front-end for a famous 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 a contenteditable field changed and used that to update the database, I am not sure how I do it.

BTW, I am bringing in the template via Iron-router:

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

Here's some sample of code of what I have been playing around 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 the 'famousEvents' too and could not seem to get that working. Ie no events fired and that would only be at the surface level, not the field level.

At the view level I was fine and 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 the other variants from this page: https://famous-views.meteor.com/examples/events

So the core questions, I think, is: Do I have to move every form element to a Famous Surface? This would be a killer. I am hoping I can still use Jquery or access the DOM for stuff within the template. Note I do see stuff in the Famous FAQ http://famo.us/guides/pitfalls that says don't touch the DOM... so happy to find out how else I should be doing this???

Answer 1

I tried to make this clearer on the events example page, but I guess I'm still not there yet. I'll answer below but please feel free to chime in with how I can improve the documentation.

Inside of a Surface is basically regular Meteor. But outside of a Surface is the realm of famous-views. So you need to have a Meteor template inside of a Surface for events to attach themselves properly - and, as noted in the docs - that template needs to have at least one element in side of it to attach the events. So either (and in both cases, renaming the outer template wrapper but leaving Template.someTemplate.events as is):

<template name="someTemplateWrapper">
    {{#Scrollview  target="content" size="[undefined,100]"}}
        {{#Surface class="green-bg"}}
            {{> someTemplate}}
        {{/Surface}}
    {{/Scrollview}}
</template>

or simply:

<template name="someTemplateWrapper">
    {{#Scrollview  target="content" size="[undefined,100]"}}
        {{>Surface template="someTemplate" class="green-bg"}}
    {{/Scrollview}}
</template>

and then move all the Meteor stuff that needs events to it's own template where the events are handled:

<template name="someTemplate">
    <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>
</template>

Hope that makes sense, just rushing out... let me know if anything is not clear and I'll ammend the answer later.