【问题标题】:Meteor Handlebars templates: switching from text to inputMeteor Handlebars 模板:从文本切换到输入
【发布时间】:2013-06-10 07:51:07
【问题描述】:

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

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

除了有几列具有不同的“foo”值,我不想多次复制和粘贴。使用模板和助手处理此问题的正确方法是什么?

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

【问题讨论】:

    标签: forms meteor handlebars.js edit-in-place


    【解决方案1】:

    你应该可以与Bootstrap Editable集成

    【讨论】:

    【解决方案2】:

    作为参考,原始问题的答案...

    截至今天,handlebars partials 不能接受除上下文参数以外的任何内容,但 helpers 可以。因此。你可以定义一个帮助器来设置模板的上下文:

    咖啡脚本:

    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 可编辑集成,因此该模板与我最初的问题略有不同。另外,我不确定这是否是最好的方法,但它比我以前的方法干净多了。

    【讨论】:

      【解决方案3】:

      meteor-editable 是一个新项目,它实现了类似 x-editable 的功能,但很好地与 Meteor 反应性集成。不幸的是,尚不支持内联编辑(您必须按照现在的设置方式使用弹出框)。

      【讨论】:

        猜你喜欢
        • 2015-09-20
        • 2012-05-31
        • 2015-03-10
        • 2013-04-25
        • 1970-01-01
        • 2013-02-17
        • 2013-09-05
        • 2011-11-02
        • 2013-10-23
        相关资源
        最近更新 更多