MVVM Array

by jeffdev

HTML

<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.default.min.css">
<form id="editform">
    <label>Item Name:
        <input type="text" data-bind="value: currItem.ItemName" />
    </label>
    <ul data-template="row-template" data-bind="source: currItem.Versions"> 
    </ul >
    
    <script id="row-template" type="text/x-kendo-template">
        <li><input type="text" data-bind="value: Version" /></li>
    </script>
</form>

JavaScript

var versionModel = kendo.data.Model.define({
    id: "VersionID",
    fields: {
        VersionID: {
            editable: false,
            nullable: true
        },
        Version: {
            type: "string",
            validation: {
                required: true
            }
        }
    }
});
var itemModel = kendo.data.Model.define({
    id: "ItemID",
    Versions: [],
    fields: {
        ItemID: {
            editable: false,
            nullable: true
        },
        ItemName: {
            type: "string",
            validation: {
                required: true
            }
        }
    }
});

var viewModel = kendo.observable({
    currItem: {}
});
viewModel.set("currItem", new itemModel({
    ItemName: "New Item"
}));
viewModel.currItem.Versions.push(new versionModel({
    Version: "New Version"
}));
viewModel.currItem.Versions.push(new versionModel({
    Version: "New Version 2"
}));

kendo.bind($("#editform"), viewModel);