Kendo MVVM

Model View ViewModel (MVVM) 是开发人员经常使用的一种设计模式，以实现数据模型（Model）和视图（View）的分离。MVVM 中的 ViewModel 部分负责把模型中的数据对象以某种方便的形式和 View 结合起来（通常是通过数据绑定的方式）。

Kendo MVVM 实现了 MVVN 设计模式，并且支持和 Kendo 框架的其它部分（如UI组件和数据源）的无缝连接。

准备开始

使用 MVVM 模式首先创建 ViewModel 对象，ViewModel 对象代表了可以使用 View 显示的数据对象，Kendo 框架中使用 kendo.observable 函数通过传入 JavaScript 对象的方法来定义一个 ViewModel 对象。比如：

var viewModel = kendo.observable({
   //里面可以绑定对象域，亦可以省略不写
   //省略不写就不能通过改变域值去改变UI里的内容
});

然后使用 HTML 创建一个 View，这个 View 包含一个文本框。

<input type="text" required data-label="消息接受者ID" name="messageReceiverId" 
data-bind="value:model.messageReceiverId" id="messageReceiverId" style="width: 100%;" class="k-textbox" readonly="readonly">

其中文本框(input) 通过data-bind 属性指明绑定到 ViewModel 对象域。此时域值发生变化将会反映到 UI 界面的 Input 输入框内容的变化。反之亦然，当 UI 输入框内容发生变化时，ViewModel 的对象域也发生变化。

最后，通过 bind 方法将 View 和 ViewModel 绑定起来。

<script>kendo.bind($('#messageReceiverId'), viewModel);</script>

完整的代码如下：

<#include "/include/header.html">
<script src="${base.contextPath}/common/code?receiver_type=RECEIVER_TYPE" type="text/javascript"></script>
<script type="text/javascript">
    var viewModel = kendo.observable({
        model: {
            enableFlag:"Y"
        },
        save: function(e){
            var data= viewModel.model.toJSON();
            var validator = $("#mainform").data("kendoValidator");
            if (validator.validate()) {
                Hap.request({
                    type   : 'POST',
                    url    : '${base.contextPath}/rent/mes/template/data/submit',
                    data   : kendo.stringify([data]),
                    success: function (data) {
                        window.parent.$("#select-template").data("kendoWindow").close();
                    }
                })
            }
        },
        closeWin: function(e){
            window.parent.$("#select-template").data("kendoWindow").close();
        }
    });
</script>
<body>
<div id="page-content">
    <form id="mainform"  class="form-horizontal" method="post" enctype="application/json;charset=UTF-8">
        <div class="form-group">
            <div class="col-sm-6">
                <label class="col-sm-3 control-label">消息模板ID:</label>
                <div class="col-sm-9">
                    <input type="text" required data-label="消息模板ID"
                           name="templateId" required data-bind="value:model.templateId" id="templateId" style="width: 100%;" class="k-textbox">
                    <script>kendo.bind($('#templateId'), viewModel);</script>
                </div>
            </div>
            <div class="col-sm-6">
                <label class="col-sm-3 control-label">消息接受者ID:</label>
                <div class="col-sm-9">
                    <input type="text" required data-label="消息接受者ID"
                           name="messageReceiverId" data-bind="value:model.messageReceiverId" id="messageReceiverId" style="width: 100%;" class="k-textbox" readonly="readonly">
                    <script>kendo.bind($('#messageReceiverId'), viewModel);</script>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-6">
                <label class="col-sm-3 control-label">消息模板名称:</label>
                <div class="col-sm-9">
                    <input type="text" required data-label="消息模板名称"
                           name="templateName" data-bind="value:model.templateName" id="templateName" style="width: 100%;" class="k-textbox">
                    <script>kendo.bind($('#templateName'), viewModel);</script>
                </div>
            </div>
            <div class="col-sm-6">
                <label class="col-sm-3 control-label">消息模板内容:</label>
                <div class="col-sm-9">
                    <textarea type="text" required data-label="消息模板内容"
                           name="templateContent" data-bind="value:model.templateContent" id="templateContent" style="width: 100%;" class="k-textbox"></textarea>
                    <script>kendo.bind($('#templateContent'), viewModel);</script>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-6">
                <label class="col-sm-3 control-label">接收者类型:</label>
                <div class="col-sm-9">
                    <input type="text" required data-label="接收者类型"
                           name="receiverType" data-bind="value:model.receiverType" id="receiverType" style="width: 100%;" class="k-textbox">
                    <script>kendo.bind($('#receiverType'), viewModel);</script>
                </div>
            </div>
            <div class="col-sm-6">
                <label class="col-sm-3 control-label">发送时间:</label>
                <div class="col-sm-9">
                    <input type="text" data-label="发送时间"
                           name="sendTime" data-bind="value:model.sendTime" id="sendTime" style="width: 100%;" class="k-textbox" readonly="readonly" >
                    <script>kendo.bind($('#sendTime'), viewModel);</script>
                </div>
            </div>

        </div>
        <div class="form-group">

            <div class="col-sm-6">
                <label class="col-sm-3 control-label" id="receiverNameLabel">消息接收者:</label>
                <div class="col-sm-9">
                    <input type="text" required data-label="消息接收者"
                           name="receiverName" data-bind="value:model.receiverName" id="receiverName" style="width: 100%;" class="k-textbox">
                    <script>kendo.bind($('#receiverName'), viewModel);</script>
                </div>
            </div>
        </div>
    </form>
</div>

<div id="mainBottom" class="text-right" style="bottom: 15px;position: fixed;  float: left;padding-top:15px;border-top:1px solid #ebebeb;width:100%; background: #fff;">
    <span class="btn btn-primary" data-bind="click:save" type="submit" style="margin-right:5px"><@spring.message "hap.save"/></span>
    <span class="btn btn-default" data-bind="click:closeWin" type="button" style="margin-right:25px;"><@spring.message "hap.cancel"/></span>
</div>

<script type="text/javascript">
    kendo.bind($('#mainBottom'),viewModel);
    kendo.bind($('#mainform'), viewModel);

    // 下拉框
    $("#receiverType").kendoComboBox({
        dataSource: {
            data: receiver_type
        },
        valuePrimitive: true,
        dataTextField: "meaning",
        dataValueField: "value"
    });

</script>

</body>
</html>

准备开始

猜你喜欢