不要使用Ember / Handlebars中的#each来销毁DOM元素
我正在尝试为ember中的绑定数组做一个CSS动画。 每次值改变时我都想做一个动画，但它不会动画，因为每当它迭代的数组发生变化时，Handlebars会完全替换#each助手中的所有内容。
以下是我正在做的简化版本：
{{#each array}}
{{custom-component value=this}}
{{/each}}
以及自定义组件的模板：
<script type="text/x-handlebars" data-template-name="components/custom-component">
<li {{bind-attr style=customAnimatedStyleThatChangesWithValue}}>{{value}}</li>
</script>
我可以预先呈现一个占位符数组，例如：
{{#each placeholderArray}}
{{custom-component value=[don't know what to put here]}}
{{/each}}
但是，正如代码块所述，它不像我可以在自定义组件调用中执行value=array[this] 。 如果值改变，我不认为自定义组件会重新渲染，但我不知道如何在迭代#each时传入不同数组的值。
TLDR：如何在数组更改时迭代组件数组而不破坏并重新创建它们？
所以看起来我在之前用placholder阵列处于正确的轨道上。 以下是我最终解决这个问题的方法：
{{#each arrayPosition in placeholderArray}}
{{custom-component value=array arrayPosition=arrayPosition}}
{{/each}}
我通过我想要的原始数组作为组件中的值，并且通过我所在的占位符数组的位置。这使我可以在控制器中执行以下操作：
App.CustomComponentController = Ember.Component.extend({
...
customAnimatedStyleThatChangesWithValue: function() {
//Grab the original array
var valueArray = this.get('value');
//Use arrayPosition to get the value you initially wanted to pass through
var value = valueArray[+this.get('arrayPosition')];
return "width: "+value+"px"; //Or whatever you're animating
}.property('value')
});
这样做，只要placeholderArray不会更改，自定义组件不会被销毁，然后重新创建。
链接地址: http://www.djcxy.com/p/61593.html上一篇: Don't destroy DOM elements with #each in Ember/Handlebars