meteor - 现在如何使用 Blaze 在 Meteor 模板中的动态字段上使用 X-editable？

Question

我有x-editable在 Meteor 0.7.2 中工作，但自从升级到 0.8.0 后，它不再正确渲染。我往往会得到一堆空标签。这很令人沮丧，因为数据就在那里，只是在渲染函数被触发时还没有。

<template name="clientPage">
    <header>{{> clientPageTitleUpdate}}</header>
</template>

<template name="clientPageTitleUpdate">
    <h1><span class="title-update editable" data-type="text" data-pk="{{_id}}" data-name="title" data-value="{{title}}">{{title}}</span></h1>
</template>


    Template.clientPageTitleUpdate.rendered = function() {

        console.log(this.$(".title-update").text());

        // set up inline as defaule for x-editable
        $.fn.editable.defaults.mode = 'inline';

        $(".title-update.editable:not(.editable-click)").editable('destroy').editable({

            url:    "empty",
            toggle: "dblclick",

            success: function (response, newValue) {
                // update value in db
                var currentClientId = $(this).data("pk");
                var clientProperties = { title: newValue };

                Clients.update(currentClientId, {$set: clientProperties}, function(error) {
                    if (error) {
                        Errors.throw(error.message)
                    }
                });
            }// success

        });

    }

我已经尝试了"new"渲染方法，将其嵌入到另一个模板中，如所述 here而且似乎也不起作用。

现在使用 x-editable 的最佳方法是什么，渲染仅触发一次并且不能确保数据存在。

我正在使用 Iron Router，我的模板没有嵌入到 {{#each}} block 中，这似乎是新渲染模型的基本解决方案。

此问题与有关 x-editable in a meteor template 的旧主题相关。 .

如果有任何帮助，我们将不胜感激。我很茫然。谢谢

Answer 1

编辑:现在在 Meteor 0.8.3 中更容易实现:

模板:

<template name="docTitle">
    <span class="editable" title="Rename this document" data-autotext="never">{{this}}</span>
</template>

代码:

Template.docTitle.rendered = ->
  tmplInst = this

  this.autorun ->
    # Trigger this whenever data source changes
    Blaze.getCurrentData()

    # Destroy old editable if it exists
    tmplInst.$(".editable").editable("destroy").editable
      display: ->
      success: (response, newValue) -> # do stuff

为了达到最有效的效果，请确保可编辑模板的数据上下文只是正在编辑的字段，如上面的示例中的 {{> docTitle someHelper}}。

<小时/>

Meteor 0.8.0 至 0.8.2 的过时信息如下

我也必须这样做，但不确定是否在我的应用程序中使用全局助手。所以我尝试通过改变可编辑的行为来实现它。

perusing the docs之后需要做的主要事情和来源是:

• 从字段文本设置表单的值
• 重写 display 函数，以便 reactivity of text updated by Meteor doesn't break
• 确保上述两个功能不会中断

这是代码(对 Coffeescript 表示歉意):

Template.foo.rendered = ->
  container = @$('div.editable')
  settings =
    # When opening the popover, get the value from text
    value: -> $.trim container.text()
    # Don't set innerText ourselves, let Meteor update to preserve reactivity
    display: ->
    success: (response, newValue) =>
      FooCollection.update @data._id,
        $set: { field: newValue }
      # Reconstruct the editable so it shows the correct form value next time
      container.editable('destroy').editable(settings)
  container.editable(settings)

这很丑陋，因为它会在设置新值后销毁并重新创建弹出窗口，以便表单字段从正确的值更新。

经过更多的逆向工程，我找到了一种更干净的方法来执行此操作，并且不涉及破坏可编辑内容。 Gadi 认为 container.data().editableContainer.formOptions.value 与此有关，这是正确的。因为这个值为set after the update因为 x-editable 认为它现在可以缓存它。嗯，它不能，所以我们将其替换为原始函数，以便继续从文本字段更新值。

Template.tsAdminBatchEditDesc.rendered = ->
  container = @$('div.editable')
  grabValue = -> $.trim container.text() # Always get reactively updated value
  container.editable
    value: grabValue
    display: -> # Never set text; have Meteor update to preserve reactivity
    success: (response, newValue) =>
      Batches.update @data._id,
        $set: { desc: newValue }
      # Thinks it knows the value, but it actually doesn't - grab a fresh value each time
      Meteor.defer -> container.data('editableContainer').formOptions.value = grabValue

注释:

上面的
• $.trim 取自 the default behavior to render value
• 有关此问题的更多讨论，请参阅 https://github.com/nate-strauser/meteor-x-editable-bootstrap/issues/15
• 这完全是一个丑陋的黑客行为，希望将来我们能在 Meteor 中看到对双向变量绑定(bind)的更好支持。

将来我会尝试使其更加简洁，等待 Meteor 更好地支持响应式依赖数据。