Question

前史：我收藏了大量物品。每个项目都有一些属性。在主页面上，这些项目由砌体安排，一切都正常，直到一个项目被更改。之后，Meteor重新渲染所有这些，删除所有属性。这会导致元素堆叠在左侧。如果我在rendered中运行砌体，它会有所帮助，但每次更新后页面会闪烁（因为元素首先离开，只有在排列之后才会闪烁）。

我已经探索了preserved选项。它非常有用，但没有帮助，因为它不保留DOM节点的属性（包括样式及其特定的Masonry设置的当前位置）。

我在preserve-test.meteor.com为演示目的做了一个简单的测试。在这个测试中，我有一个包含一个项目的集合，其值显示。您可以通过单击“切换可见性”按钮切换DOM节点的可见性，并通过单击“更新项目”按钮更改项目的值。

等到页面加载并显示“这是一个数字”标签。单击第一个按钮。标签应该消失。单击第二个按钮。标签再次出现不同的值，而我希望它以静默方式更新其文本并保留“隐藏”属性。这就是问题：当更新集合项时，DOM节点的样式将被删除，这不是我想要的。

使用Meteor的反应性时，有没有办法保留DOM节点的动态设置属性？以下是示例代码：

保留-的test.html：

<head><title>preserve-test</title></head>
<body>{{> hello}}</body>

<template name="hello">
  <div><input type="button" id="toggle" value="Toggle visibility" /></div>
  <div><input type="button" id="update" value="Update item" /></div>
{{#if item}}
  {{> some_item item }}
{{else}}
  Loading, please wait...
{{/if}}
</template>

<template name="some_item">
  <div id="some_item">
    Here is a number: {{value}}
  </div>
</template>

保留-test.js：

Items = new Meteor.Collection("items");

if (Meteor.isClient) {
  Template.hello.item = function () {
    return Items.findOne();
  };

  var node = null;
  Template.some_item.rendered = function() {
    if (!node) {
      node = $(this.find('#some_item'));
    }
  }


  Template.some_item.preserve({
    '#some_item': true
  });

  Template.hello.events({
    'click #toggle' : function () {
      $(node).toggle();
    },
    'click #update': function() {
      Items.update(Items.findOne()._id, {$inc: { value: 1}});
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    Items.remove({});
    Items.insert({ value: 0 });
  });
}

Answer 1

在当前版本中，没有。您不能拥有使用Meteor反应性的代码区域，同时还要保留其他库添加的属性等。 Meteor的渲染引擎目前正在被重写为Meteor UI，它将采用更细粒度的方法，并且应该与你想要实现的目标一起工作。如果您想尝试新模板引擎的当前预览，请运行您的meteor应用程序：

meteor --release template-engine-preview-5.5

我建议您阅读并观看与此问题相关的博文：

http://www.meteor.com/blog/2013/11/07/david-greenspan-at-devshop-9-meteors-new-rendering-model

Meteor：有没有什么方法可以在重新渲染过程中保留DOM节点，但它的属性也可以与Masonry一起使用？

1 个答案: