现在如何使用 Blaze 在 Meteor 模板中的动态字段上使用 X-editable? [英] How do I use X-editable on dynamic fields in a Meteor template now with Blaze?

问题描述

我有 x-editable 在 Meteor 0.7.2 中工作，但自从升级到0.8.0 它不再正确呈现.我倾向于以一堆空标签结束.这是令人沮丧的，因为数据就在那里，而不是在渲染函数被触发时.

I had x-editable working in Meteor 0.7.2 but since upgrading to 0.8.0 it no longer renders correctly. I tend to end up with a bunch of Empty tags. This is frustrating because the data is there, just not by the time the rendered function is fired.

<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

        });

    }

我尝试了将 this 嵌入另一个模板的新"渲染方法，如here 它似乎也不起作用.

I have tried the "new" rendered method of embeding the this into another template as explained here and it doesn't seem to work either.

现在使用 x-editable 的最佳方法是呈现仅触发一次并且不确保数据在那里.

What is the best way to use x-editable now that rendered only fires once and doesn't make sure the data is there.

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

I am using Iron Router and my templates are not embeded in an {{#each}} block which seems to be the basic solution to the new rendered model.

这个问题与这个关于 x-可在流星模板中编辑.

This question is related to this older topic about x-editable in a meteor template.

这里的任何帮助都将不胜感激.我很茫然.谢谢

Any help whatsoever would be super appreciated here. I am at a loss. Thanks

推荐答案

现在在 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}}.

For this to be most efficient, make sure the data context of the editable template is only the field being edited, as in the example above with {{> docTitle someHelper}}.

Meteor 0.8.0 到 0.8.2 的过时信息

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

I also had to do this but wasn't sure about using the global helper in my app. So I tried to accomplish it by just changing the behavior of the editable.

仔细阅读文档后需要做的主要事情 和来源，分别是:

• 从字段文本设置表单的值
• 覆盖 display 函数，以便 由 Meteor 更新的文本的反应性不会不休息
• 确保以上两个函数没有中断

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

Here's the code (apologies for 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)

这很难看，因为它会在设置新值后销毁并重新创建弹出框，以便表单字段从正确的值更新.

This is ugly because it destroys and re-creates the popover after setting a new value, so that the form field updates from the correct value.

经过一些逆向工程后，我找到了一种更简洁的方法来做到这一点，它不涉及破坏可编辑内容.Gadi 认为 container.data().editableContainer.formOptions.value 与它有关.这是因为这个值是 nor更新后设置 因为 x-editable 认为它现在可以缓存它.好吧，它不能，所以我们用原始函数替换它，以便继续从文本字段更新值.

After some more reverse engineering, I found a cleaner way to do this that doesn't involve destroying the editable. Gadi was right on that container.data().editableContainer.formOptions.value has something to do with it. It's because this value is set after the update because x-editable thinks it can cache this now. Well, it can't, so we replace this with the original function so the value continues being updated from the text field.

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 以上摘自 渲染值的默认行为
• 有关此问题的更多讨论，请参阅 https://github.com/nate-strauser/meteor-x-editable-bootstrap/issues/15
• 这完全是一个丑陋的 hack，希望将来我们会在 Meteor 中看到对双向变量绑定的更好支持.

在 Meteor 为被动依赖数据提供更好的支持之前，我将在未来尝试使其更加简洁.

I will try to make this more concise in the future pending better support from Meteor for depending on data reactively.

这篇关于现在如何使用 Blaze 在 Meteor 模板中的动态字段上使用 X-editable?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！