流星车把模板:从文本切换到输入

Question

我的流星应用程序的一部分是一个半协作表，用户可以同时编辑不同的行。当用户编辑一行时，静态文本值需要切换到输入框，以便编辑和保存这些值。我想要一个模板/帮助器来做这件事，基本上我想:

<td>
{{#if iAmEditing}}
   {{foo}}
{{else}}
   <input type="text" name="foo" value="{{foo}}">
</td>

除了有几个列有不同的"foo"值，我不想复制粘贴几次。使用模板和帮助器来实现这一点的正确方法是什么?

另一种方法可能是使用HTML5 contenteditable属性。无论哪种方式，用车把模板化这些值的正确方法是什么?

Answer 1

您应该能够与Bootstrap edit集成

Answer 2

作为参考，原问题的答案…

到目前为止，handlebars部分不能接受上下文参数以外的任何参数，但是helper可以。因此。您可以定义一个帮助器来为模板设置上下文:

Coffeescript:

Handlebars.registerHelper "eventCell", (context, field, editable) ->
  return new Handlebars.SafeString(
    Template._eventCell
      _id: context._id
      field: field
      value: context[field]
      editable: editable
  )

模板:

<template name="_eventCell">
    <td><div data-ref="{{field}}" class="{{#if editable}}editable{{/if}}">
        {{value}}
    </div></td>
</template>

然后，我只使用以下代码来呈现每个字段:

{{eventCell this "province" iAmEditing}}

我最终集成了bootstrap edit，所以模板与我最初的问题有点不同。另外，我不确定这是不是最好的方式，但它比我以前的要干净得多。

Answer 3

Meteor -editable是一个新项目，实现了类似x-editable的功能，但很好地集成了Meteor反应性。不幸的是，内联编辑还不支持(你必须使用它现在设置的方式弹出窗口)。