jquery - 如何将 jquery 插件应用于由 knockout 模板生成的 div

Question

想知道我是否可以将 jquery 插件应用于由 knockout 模板生成的 div。

这是我正在做的事情:
我有一个模板

<script type="text/html" id="single-file-image-template">
    <div id="iviewer"></div>
</script>

那么我怎样才能像我在 jquery 风格中所做的那样呢？

  var iv = $('#iviewer').iviewer(
      'loadImage', documentUrl
  );

欢迎任何建议!

问候
泽维尔

Answer 1

您可以按如下方式创建自定义绑定(bind):

ko.bindingHandlers.iviewer = {
   init: function (element, valueAccessor, allBindingsAccessor) {
     var value = ko.utils.unwrapObservable(valueAccessor());
       //initialize iviewer with url
      $(element).iviewer('loadImage', value);    
    },

     //update the control when the view model changes
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).iviewer('loadImage', value);
    }
};

并以这种方式使用它:

<div data-bind="iviewer : url">
<div>

ko.applyBindings({ url : 'yourUrl'});

See fiddle