问题描述
我有 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?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!