ZK实际应用：MVVM –与ZK客户端API一起使用

在之前的文章中，我们使用ZK的MVVM实现了以下功能：

• 将数据加载到表中
• 使用表单绑定保存数据
• 删除条目并以编程方式更新视图

ZK MVVM和ZK MVC实现方式之间的主要区别是，我们不直接在controller（ViewModel）类中访问和操作UI组件。 在本文中，我们将看到如何将某些UI操作委派给客户端代码，以及如何将参数从View传递到ViewModel。

目的

为我们的简单清单CRUD功能构建更新功能。 用户可以在表中就地编辑条目，并可以选择更新或放弃所做的更改。 修改后的条目以红色突出显示。

ZK实战功能

• ZK客户端API
• ZK风格班
• MVVM：将参数从视图传递到ViewModel

分步实施  

在列表框中启用就地编辑，以便我们可以编辑条目：

<listcell>
       <textbox inplace="true" value="@load(each.name)" ...</textbox>
   </listcell>
   ....
   <listcell>
       <doublebox inplace="true" value="@load(each.price)" ...</textbox>
   </listcell>
   ...

• inplace =” true”呈现输入元素，例如Textbox，但其边框未显示为纯标签； 仅当选择输入元素时才显示边框
• 第2、6行，“每个”指的是数据收集中的每个Item对象

编辑条目后，我们希望为用户提供更新或放弃更改的选项。
仅当用户对列表框条目进行了修改时，“更新”和“放弃”按钮才需要可见。 首先，我们定义JavaScript函数以显示和隐藏“更新”和“放弃”按钮：

<toolbar>
    ...
    <span id="edit_btns" visible="false" ...>
        <toolbarbutton label="Update" .../>
        <toolbarbutton label="Discard" .../>
    </span>
</toolbar>

    <script type="text/javascript">
        function hideEditBtns(){
     jq('$edit_btns').hide();
        }
  
        function showEditBtns(){ 
     jq('$edit_btns').show();
        }

    </script>
    ...

• 第2行，我们包装了Update and Discard ，并将可见性设置为false
• 第9、13行中，我们定义了分别隐藏和显示“ 更新”和“ 放弃”按钮的函数
• 第11、15行，我们使用jQuery选择器jq（'$ edit_btns'）检索ID为“ edit_btns”的ZK小部件； 请注意，ZK小部件ID的选择器模式为“ $”，而不是“＃”

修改列表框中的条目后，我们将使“更新/丢弃”按钮可见，并使修改后的值变为红色。 单击“更新”或“放弃”按钮后，我们想再次隐藏按钮

由于这是纯UI交互，因此我们将使用ZK的客户端API：

<style>
   .inputs { font