MVVM架构~mvc,mvp,mvvm大话开篇

<table>
        <thead>
            <tr>
                <th>编号th>
                <th>姓名th>
                <th>电话th>
                <th>操作th>
            tr>
        thead>
        <tbody data-bind="template:{name:'list',foreach: lines}">
        tbody>
        <tfoot>
            <tr>
                <td colspan="4">
                    <button data-bind='click: addLine'>Addbutton>td>
            tr>
        tfoot>
    table>
    <script type="text/html" id="list">
        <tr>
            <td><span data-bind="text:Id"></span></td>
            <td>
                <span data-bind="text: Name"></span>

            </td>
            <td>
                <span data-bind="text: PhoneNo"></span>

            </td>
            <td>
                <a href='#' data-bind='click: $parent.removeLine'>Remove</a>
            </td>
        </tr>
    script>

       public IEnumerable Get()
        {
            Contact[] contacts = new Contact[]
            {
                new Contact{Id=1, Name="张三", PhOneNo="123", EmailAddress="zhangsan@gmail.com"},
                new Contact{Id=2, Name="李四", PhOneNo="456", EmailAddress="lisi@gmail.com"},
                new Contact{Id=3, Name="王五", PhOneNo="789", EmailAddress="wangwu@gmail.com"},
            };
            return contacts;
        }

  
        var CartLine = function () {
            var self = this;
            self.Id = ko.observable();
            self.Name = ko.observable();
            self.PhoneNo = ko.observable(135);
            self.EmailAddress = ko.observable("@");
        };

        $.getJSON("http://localhost:2166/api/values/", function (data) {
            var Cart = function () {
                // Stores an array of lines, and from these, can work out the grandTotal
                var self = this;
                //self.lines = ko.observableArray([new CartLine()]);
                self.lines = ko.observableArray(data);
                // Operations
                self.addLine = function () { self.lines.push(new CartLine()) };
                self.removeLine = function (line) { self.lines.remove(line) };
            }
            ko.applyBindings(new Cart());
        });