Question

我目前正在使用Meteor 0.9.2.2。我想更好地了解如何在Meteor + Famous中构建表单，而不必将每个表单元素放入Famous表面。

我正在使用＆＃34; gadicohen：着名观点0.1.7＆＃34;和＆＃34; mjnetworks：着名的0.2.2＆＃34;

我正在使用https://github.com/gadicc/meteor-famous-views并查看了一些事件样本。我可以在视图上生成事件，但似乎已经失去了使用Jquery（可能是着名的警报响铃）为模板上的字段生成事件的能力。

（注意我尝试跟随What is a recommended way to get data into your meteor template from the front-end for a famous surface?，但这只是指示我正在关注的示例 - 抱歉仍然卡住了）

例如，如果我想要＆＃34;模糊＆＃34;当一个可知的字段发生变化并用它来更新数据库时，我不知道我是怎么做的。

BTW，我通过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');
 },

});

我看着着名的事件＆＃39;也是如此，似乎无法实现这一点。也就是说，没有任何事件被发射，只会在地面层面，而不是场地层面。

在视图级别我很好，下面的代码工作正常：

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的东西...很高兴知道我应该怎么做这个???

Answer 1

我试图在事件示例页面上更清楚，但我想我还没有。我将在下面回答，但请随时了解我如何改进文档。

Surface内部基本上是常规Meteor。但是在Surface之外是着名景观的领域。所以你需要在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>

希望这是有道理的，只是急于求成......如果有什么不清楚，请告诉我，我会在稍后提出答案。

需要帮助请：流星和着名的整合和形式的创建

1 个答案: