CustomBinding Handler为数组中的每个项目渲染模板

时间:2015-06-25 14:08:46

标签: javascript knockout.js

我看过并且没有找到关于如何执行以下操作的文档:

我想创建一个幻灯片定制的敲除绑定处理程序。此处理程序应该能够传递图像数组以及用于幻灯片中呈现的每个项目的挖空模板的id。我遇到的问题是我找不到任何在线示例,显示如何将observablearray传递给自定义绑定,并使用淘汰脚本模板为阵列中的每个项目敲除渲染dom元素。有没有人有任何例子?

绑定示例

-1

用于每个项目示例的模板

<div class="slideshow" data-bind="slideshow: { data: images, imageTemplate: 'rowTmpl' }">

      </div>

非常感谢任何建议/帮助/示例

1 个答案:

答案 0 :(得分:0)

可以自行管理foreach提供的功能,但使用binding preprocessing功能要容易得多。 Knockout Punches也使用此功能来实现其大部分功能。

您在评论中提到的内容..

  

因此,内置模板绑定不合适。

..没有多大意义:如果你宁愿自己实现模板加载,你可以回到普通的'手动创建DOM元素&amp;将听众附加到他们身上。 更明智的做法是将模板绑定集成到自定义绑定中,尽管是不可见的。有了它,甚至不需要initupdate函数:

ko.bindingHandlers.slideshow = {
  preprocess: function(value, name, addBinding) {
    var newBinding = value.replace('imageTemplate', 'name').replace('data', 'foreach');
    addBinding('template', newBinding);
    return value;
  }
};

当然你仍然可以添加一个初始化/更新功能,并“参数化”你的绑定(添加更多选项),然后在那里采取行动。

您可以在此处找到演示:http://jsfiddle.net/kevinvanlierde/yrv8cv26/1/。 我还添加了一个简单的上一个/下一个导航,以显示如何在之后添加简单DOM事件的功能。