将值从视图模型传递到 zk 中的脚本 [英] Pass value from viewmodel to script in zk

问题描述

我正在尝试使用 PDFObject 内联显示 pdf 文件.应用程序可能包含许多文件.所有文件都显示在列表中.单击任何一个文件时，如果浏览器包含 pdf 插件或显示一些锚标签来下载文件，则 pdf 应该是可见的.

我遇到的问题是..我不知道如何将文件名从视图模型传递到 zul 页面中的脚本.

这是我目前所做的..

<button label="ok" w:onClick="embedPDF()"/><script type='text/javascript'>函数嵌入PDF(){var myPDF = new PDFObject({网址:'abc.pdf'}).embed();}window.onload = 嵌入PDF；//如果需要，可以随意替换window.onload.<div>您在此网站上似乎没有 Adob​​e Reader 或 PDF 支持浏览器.<a href="abc.pdf">点击这里下载PDF</a>

</窗口>

解决方案

在这个 fiddle 您有一个使用 PDFObject 进行动态加载的示例.我只对你的代码做了一些小的改动.问题:pdf 容器的高度似乎固定为 150 像素，但我相信您可以从现在开始找到一些调整:-)

Index.zul

<?script type="text/javascript" src="http://pdfobject.com/scripts/pdfobject.js"?><zk><script type='text/javascript'>函数嵌入PDF(_url){var myPDF = new PDFObject({网址:_url}).embed('pdfContainer');}<vlayout apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('pkg$.TestVM')" xmlns:w="http://www.zkoss.org/2005/zk/客户端"><listbox model="@load(vm.pdfUrls)"><模板名称="模型" var="url"><列表项><listcell label="@load(url)"/><列表单元格><button label="load" onClick="@command('loadPdf', url=url)"/></listcell></listitem></列表框><vlayout xmlns:n="native"><n:object id="pdfContainer"></n:object></vlayout></vlayout></zk>

TestVM.java

import org.zkoss.bind.annotation.AfterCompose;导入 org.zkoss.bind.annotation.Command;导入 org.zkoss.bind.annotation.BindingParam;导入 java.util.List;导入 java.util.ArrayList;导入 org.zkoss.zk.ui.util.Clients;公共类 TestVM {列表<字符串>pdf网址；@AfterCompose公共无效 afterCompose() {pdfUrls = new ArrayList();pdfUrls.add("http://www.pdf995.com/samples/pdf.pdf");pdfUrls.add("https://partners.adobe.com/public/developer/en/xml/AdobeXMLFormsSamples.pdf");pdfUrls.add("https://www.iscp.ie/sites/default/files/pdf-sample.pdf");}@命令public void loadPdf(@BindingParam("url")String url) {Clients.evalJavaScript("embedPDF('"+ url +"')");}公共列表<字符串>getPdfUrls() {返回pdfUrls；}}

干杯，亚历克斯

I am trying to use PDFObject to show the pdf files inline. The application may contain many files. All the files are shown in the list. On clicking any one of the file, the pdf should be viewable if browser contains the pdf plugin or else show some anchor tag to download the file.

The problem I am having is .. I couldn't figure out how to pass the file name from viewmodel to the script in the zul page.

This is what I have done so far..

<?page title="Auto Generated index.zul"?>
<?script type="text/javascript" src="pdfobject.js"?>
<window title="Hello World!!" border="normal" width="200px"     apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('com.shahukhalroshan.vm.DemoViewModel')"  xmlns:w="http://www.zkoss.org/2005/zk/client">
<button label="ok" w:onClick="embedPDF()" />
<script type='text/javascript'>
  function embedPDF(){
    var myPDF = new PDFObject({ 
      url: 'abc.pdf'
    }).embed();  
  }
  window.onload = embedPDF; //Feel free to replace window.onload if needed.       
</script>
    <div>
       It appears you don't have Adobe Reader or PDF support in this web
       browser. <a href="abc.pdf">Click here to download the PDF</a>
    </div>  
</window>

解决方案

In this fiddle you have an example on dynamic load using PDFObject. I've only done some small changes to your code. Issue: the pdf container seems to have a fixed height to 150px, but I'm sure you can find some tweaks from now on :-)

Index.zul

<?script type="text/javascript" src="http://pdfobject.com/scripts/pdfobject.js"?>
<zk>
  <script type='text/javascript'>
  function embedPDF(_url){
    var myPDF = new PDFObject({ 
      url: _url
    }).embed('pdfContainer');  
  }
</script>

  <vlayout apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('pkg$.TestVM')" xmlns:w="http://www.zkoss.org/2005/zk/client">
    <listbox model="@load(vm.pdfUrls)">
      <template name="model" var="url">
        <listitem>
          <listcell label="@load(url)" />
          <listcell>
            <button label="load" onClick="@command('loadPdf', url=url)" />
          </listcell>
        </listitem>
      </template>
    </listbox>
    <vlayout xmlns:n="native">
      <n:object id="pdfContainer"></n:object>
    </vlayout>
  </vlayout>
</zk>

TestVM.java

import org.zkoss.bind.annotation.AfterCompose;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.BindingParam;
import java.util.List;
import java.util.ArrayList;
import org.zkoss.zk.ui.util.Clients;

public class TestVM {

    List<String> pdfUrls;

    @AfterCompose
    public void afterCompose() {
      pdfUrls = new ArrayList<String>();
      pdfUrls.add("http://www.pdf995.com/samples/pdf.pdf");
      pdfUrls.add("https://partners.adobe.com/public/developer/en/xml/AdobeXMLFormsSamples.pdf");
      pdfUrls.add("https://www.iscp.ie/sites/default/files/pdf-sample.pdf");
    }

  @Command
    public void loadPdf(@BindingParam("url")String url) {
      Clients.evalJavaScript("embedPDF('"+ url +"')");
    }

  public List<String> getPdfUrls() {
    return pdfUrls;
  }

}

Cheers, Alex

这篇关于将值从视图模型传递到 zk 中的脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！