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

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

Я использую "gadicohen:famous-views 0.1.7" и "mjnetworks:famous 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 для вещей в шаблоне. Обратите внимание, что я вижу в часто задаваемых вопросах о знаменитостях http://famo.us/guides/pitfalls, что говорит не трогайте DOM... так рад узнать, как еще я должен это делать???


meteor meteor-blaze famo.us
person aginsburg    schedule 18.09.2014    source источник

Ответы (1)


arrow_upward
6
arrow_downward

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

Внутри Surface в основном обычный метеор. Но за пределами Поверхности царит известность. Таким образом, вам нужно иметь шаблон Meteor внутри поверхности, чтобы события могли правильно прикрепляться — и, как указано в документации, этот шаблон должен иметь по крайней мере один элемент сбоку, чтобы прикрепить Мероприятия. Итак, либо (и в обоих случаях, переименовав внешнюю оболочку шаблона, но оставив 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>

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

person gadicc    schedule 19.09.2014
comment
огромное спасибо. Что помогает. На самом деле я добрался туда очень поздно прошлой ночью (мое время) методом исключения, который был довольно сложным. Я думаю, что может помочь начинающим людям, таким как я, пример списка форм (шаблоны Meteor), которые должны проверять/получать значения из формы и реагировать на такие вещи, как клики, прикосновения и т. д. Например, моя следующая задача — увидеть если есть способ разрешить это работать на мобильных и настольных компьютерах. Поэтому я думаю, что мне просто нужно добавить дополнительные события и обрабатывать их таким образом... - person aginsburg; 20.09.2014
comment
Я попробую это в течение следующих нескольких дней. Таким образом, в целом, отличная работа и любые другие примеры, демонстрирующие интеграцию с более традиционными шаблонами приложений, такими как формы, мастера и модальные диалоги, могут уберечь новичков, таких как я, от неприятностей. Спасибо еще раз. - person aginsburg; 20.09.2014