Нужна помощь, пожалуйста: Метеор и Знаменитая интеграция и создание форм

Question

В настоящее время я использую Метеор 0.9.2.2. Я пытаюсь лучше понять, как построить форму в Meteor + Famous, не помещая каждый элемент формы в поверхность Famous.

Я использую "gadicohen: known-views 0.1.7" и "mjnetworks: known 0.2.2 "

Я использую https://github.com/gadicc/meteor-famous-views и посмотрел некоторые примеры событий. Я могу генерировать события в представлении, но, похоже, утратил способность генерировать события, используя Jquery (возможно, отключены известные сигналы тревоги) для полей в шаблоне.

(Заметьте, я попробую следовать. Каков рекомендуемый способ получения данных в шаблоне метеора из внешнего интерфейса для известной поверхности? Но это только подтолкнуло меня к примерам, за которыми я следую - извините, все еще застрял)

Например, если я хотел иметь событие "размытия", когда изменяемое поле изменилось, и использовал его для обновления базы данных, я не уверен, как мне это сделать.

Кстати, я вношу шаблон через Iron-router:

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

Вот пример кода того, с чем я играю:

<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');
 },

});

Я тоже посмотрел на "знаменитые события" и никак не мог заставить это работать. Т.е. не произошло никаких событий, и это было бы только на уровне поверхности, а не на уровне поля.

На уровне просмотра я был в порядке, и код ниже работал нормально:

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

Я попробовал другие варианты с этой страницы: https://famous-views.meteor.com/examples/events

Итак, основные вопросы, я думаю, таковы: должен ли я переместить каждый элемент формы на Famous Surface? Это будет убийцей. Я надеюсь, что я все еще могу использовать Jquery или получить доступ к DOM для вещей в шаблоне. Обратите внимание, что я вижу материал в Famous FAQ http://famo.us/guides/pitfalls который говорит, что не трогай DOM... так рад узнать, как еще мне следует это делать???

Answer 1

Я попытался прояснить это на странице примеров событий, но, думаю, я еще не там. Я отвечу ниже, но, пожалуйста, не стесняйтесь сообщать, как я могу улучшить документацию.

Внутри поверхности в основном обычный Метеор. Но за пределами поверхности царят знаменитые виды. Таким образом, вам нужно иметь шаблон Meteor внутри Surface для событий, чтобы прикрепить себя должным образом - и, как отмечено в документах, - этот шаблон должен иметь по крайней мере один элемент в стороне от него, чтобы прикрепить события. Так что либо (и в обоих случаях переименование внешней оболочки шаблона, но оставление Template.someTemplate.events как есть):

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

или просто:

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

а затем переместите все элементы Meteor, для которых нужны события, в свой собственный шаблон, где они обрабатываются:

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

Надеюсь, что это имеет смысл, просто торопиться... дайте мне знать, если что-то не ясно, и я исправлю ответ позже.