【问题标题】:Render the meteor template manually when database changes occur发生数据库更改时手动渲染流星模板
【发布时间】:2013-12-24 18:40:53
【问题描述】:

我有一个meteorjs 模板,我用它来呈现一些记录。我想要做的是,当数据库发生任何变化时,我想手动调用模板渲染方法。我可以仅从 DOM 重新加载一个模板以反映更改吗?我的代码是

<template name="textlines">
<table class="table table-striped table-bordered table-condensed table-hover listing"
               id="content_listing-table">
            <thead>
            <tr>
                <th>Text Lines</th>
            </tr>
            </thead>
            <tbody>
            {{#each textline}}
            <tr>
                <td>
                    <a href="#" data-id={{_id}} class="edit"> {{texts}}</a>
                </td>
            </tr>
            {{/each}}     
           </tbody>
        </table>
</template>

我的流星渲染方法是这样的

Template.textlines.rendered = function () {
$("#content_listing-table").dataTable();
}

现在我想在对数据库进行 CRUD 操作后手动调用此 Template.textlines.rendered 方法。我不知道我问的是对还是错,有没有可能。我在使用数据表时遇到了一些问题。所以我想每次手动刷新模板,将数据库返回的内容添加到dataTable中。谢谢

【问题讨论】:

  • textlines 是如何定义的?
  • textlines 是模板名称。和 textline 来自数据库
  • 哦,我是说textline

标签: jquery meteor datatables jquery-datatables meteorite


【解决方案1】:

嗯。我怀疑即将发布的 Meteor UI 版本将使 jQuery UI 插件在 Meteor 中正常工作,因此不会诱使人们应用 Meteor 反模式,但这里有一个可以实现你想要的东西的尝试:

Deps.autorun(function () {
  var htmlString = Template.textlines({textlines: Textlines.find()});
  $("#content_listing-table").replaceWith(htmlString);
  $("#content_listing-table").dataTable();
});

有了这个,您需要将{{&gt; textlines}} 替换为&lt;table id="content_listing-table"&gt;

【讨论】:

  • 谢谢唐尼温斯顿,在部门。 autorun 无法访问数据库,表示 `Template.textlines({textlines: Textlines.find()});` 显示未定义。
【解决方案2】:

您似乎正在使用 jQuery DataTables 插件,并且您在使用您的数据库更新由插件维护的 DOM 时遇到了问题。

如果是这样,您可以观察您的收藏并使用他们的 API 进行更改。

例如:

Template.textlines.created = function() {
    var _watch = Collection.find({});
    var handle = _watch.observe({
        addedAt: function (doc, atIndex, beforeId) {
            $('#content_listing-table').dataTable().fnAddData(doc);
        },
        changedAt: function(newDoc, oldDoc, atIndex) {
            $('#content_listing-table').dataTable().fnUpdate(newDoc, atIndex);
        },
        removedAt: function(oldDoc, atIndex) {
            $('#content_listing-table').dataTable().fnDeleteRow(atIndex);
        }
    });
};

在 StackOverflow answer 中有更多信息。

【讨论】:

  • 感谢 Jrullman。我回答了这两个问题。它解决了小问题。
  • 很高兴听到这个消息!如果您认为此答案对可能遇到您的问题的其他人有帮助,请单击复选标记接受它:)
猜你喜欢
  • 1970-01-01
  • 2016-06-10
  • 1970-01-01
  • 1970-01-01
  • 2012-06-16
  • 1970-01-01
  • 2016-05-18
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多