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

Question

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

Я использую «gadicohen: известные-взгляды 0.1.7» и «mjnetworks: известный 0.2.2»

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

(Обратите внимание, я FID попробовать следующее What is a recommended way to get data into your meteor template from the front-end for a famous surface?, но это просто направил меня к примерам я следую - извините еще застряли)

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

BTW, я несу в шаблоне через железо-маршрутизатор:

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

}); 

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

На уровне представления я был хорошо и ниже код работал отлично:

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

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

Answer 1

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

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

, а затем переместить все вещи Метеор что необходимо события его собственной матрицы, где обрабатываются события:

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

Надежда, что имеет смысл, только выбежав ...дайте мне знать, если что-то неясно, и я отвечу на ответ позже.