Question

只有在对图像URL进行硬编码时，我才能使用lightbox.js在ZK框架中查看图像。我需要一种从ViewModel设置URL的方法，但我无法实现。以下是我到目前为止所做的事情：

<zk apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('com.shahukhalroshan.vm.TestVM')" xmlns:h="native">
    <style src="lightbox.css" />
    <div>
        <h:a class="example-image-link" href="http://www.quicksprout.com/images/foggygoldengatebridge.jpg" data-lightbox="example-1">
            <image id="imgUrl" sclass="example-image" src="http://www.quicksprout.com/images/foggygoldengatebridge.jpg" width="100px" height="100px" />
        </h:a>
     </div>
     <script src="lightbox-plus-jquery.js"></script>
</zk>

如下更换src并不起作用：

<h:a class="example-image-link" href="@load(vm.imageUrl)" data-lightbox="example-1">
   <image id="imgUrl" sclass="example-image" src="@load(vm.imageUrl)" width="100px" height="100px" />
</h:a>

提前致谢！

Answer 1

首先要做的事情您无法将zk标记声明为viewmodel。

将zk标记更改为window时，我可以访问视图模型，但当然仍然不正确。

所以我在getter中添加了一些JQuery来修复它。

祖尔：

<window apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('pkg$.TestVM')" xmlns:h="native">
    <div>
        <h:a id="anchor" class="example-image-link" data-lightbox="example-1">
            <image id="imgUrl" sclass="example-image" src="@load(vm.url)" width="100px" height="100px"/>
        </h:a>
    </div>
</window>

TestVM.java：

private String url = "http://www.quicksprout.com/images/foggygoldengatebridge.jpg";

public String getUrl() {
    Clients.evalJavaScript("jq('#anchor')[0].href='" + url + "';");
    return url;
}

Working fiddle found here.

Zk集成了lightbox.js

1 个答案:

祖尔：

TestVM.java：