meteor - 需要帮助请 : Meteor and Famous integration and creation of forms

Question

我目前使用的是 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并查看了一些事件样本。我可以在 View 上生成事件，但似乎已经失去了使用 Jquery(可能是 Famous 警钟响起)为模板上的字段生成事件的能力。

(请注意，我 fid 尝试关注 What is a recommended way to get data into your meteor template from the front-end for a famous surface?，但这只是将我引导至我正在关注的示例 - 抱歉仍然卡住了)

例如，如果我想在 contenteditable 字段发生更改并使用它来更新数据库时产生“模糊”事件，我不确定该怎么做。

顺便说一句，我正在通过 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');
 },

});

我也查看了“famousEvents”，但似乎无法正常工作。即没有触发任何事件，这只会发生在表面层面，而不是现场层面。

在 View 级别我很好，下面的代码工作正常:

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？这将是一个 killer 。我希望我仍然可以使用 Jquery 或访问 DOM 以获取模板中的内容。请注意，我确实在著名的常见问题解答中看到了内容 http://famo.us/guides/pitfalls上面写着不要触摸 DOM...很高兴知道我还应该怎么做？？？

Answer 1

我试图在事件示例页面上更清楚地说明这一点，但我想我还没有做到。我将在下面回答，但请随时提出我可以如何改进文档的意见。

Surface 内部基本上是普通的 Meteor。但是在 Surface 之外是著名 View 的领域。因此，您需要在 Surface inside 中有一个 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>

希望这是有道理的，只是冲出去...如果有任何不清楚的地方，请告诉我，我稍后会修改答案。