将knockoutJS数据绑定模板插入容器后刷新砌体布局 [英] Refresh masonry layout after knockoutJS databound template is inserted into a container

问题描述

我有一个用于将div列表绑定到可观察数组的敲除模板绑定：

I have a knockout template binding used to bind list of divs to an observable array:

<div class="menu-instance-entries js-masonry" data-masonry-options='{ "gutter": 20, "itemSelector": ".menu-entry" }' data-bind="template: { name: 'menu-entries-template', foreach: MenuEntries }"></div>

MenuEntries 是一个可观察的数组绑定到视图模型函数的单击处理程序将新元素 push ed放入其中。

MenuEntries is an observable array that gets a new element "pushed" into it by a click handler bound to a view model's function.

布局 .menu-instance-entries 容器中的元素由控制砌成插件并且为了进行手动绝对定位，需要调用 $ container.masonry（'prepended'，elements）传递元素集合。

The layout of the elements in the .menu-instance-entries container is controlled by the masonry plugin and in order for the manual absolute positioning to take place, one need to call $container.masonry( 'prepended', elements ) passing the elements collection.

在可观察集合' .push 发生的地方，我处于控制之中，但我不知道如何从模板中新创建的div中获取jQuery元素以传递给砌体插件的jQuery调用。

I am in control at the point of where observable collections' .push occures, but I have no idea how to get a jQuery element from a newly created div by template to pass onto a jQuery call to masonry plugin.

如何在knockout元素上更新布局通过可观察数组添加？

What should I do to have the layout updated on knockout element adding via observable array?

推荐答案

您可以使用afterAdd或beforeRemov虽然因为你从ViewModel获得了对DOM的依赖，但我建议不要使用模板绑定的函数。

You can use the afterAdd or beforeRemove functions of the template binding, I advice against it though because you get dependencies to the DOM from the ViewModel.

最好创建一个处理砌体之间交互的自定义​​绑定和KO

Better to create a custom binding that handles the interaction between masonry and KO

这篇关于将knockoutJS数据绑定模板插入容器后刷新砌体布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！