Question

我试图在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]那样。如果值发生变化，我不会认为自定义组件会重新渲染，但我不知道在使用{{进行迭代时如何传入不同数组的值1}}。

TLDR：如果数组发生变化，如何在不破坏和重新创建组件的情况下迭代组件数组？

Answer 1

所以看来我之前使用的是平板电脑阵列。以下是我最终解决这个问题的方法：

{{#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不发生变化，就不会销毁自定义组件，然后重新创建。

不要在Ember / Handlebars中使用#each销毁DOM元素

1 个答案: