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

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并查看了一些事件样本.我可以在视图上生成事件,但似乎已经失去了使用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');
 },

});

我也看了'famousEvents',但似乎无法正常工作.也就是说,没有事件发生,只会在地面,而不是现场.

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

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来获取模板中的内容.注意我确实在着名的常见问题解答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>

希望这是有道理的,只是冲出去...让我知道如果有什么不清楚,我会在稍后提出答案.