Knockout-弹出问题编辑项目

我是淘汰赛的新手，到目前为止我很喜欢它。我一直在尝试使用一个带有编辑链接的简单表格来构建一个行编辑网格。到目前为止，它似乎进展顺利，但一直被困在这个问题上，我在绑定保存和更新或canel时出错：

Uncaught TypeError: this.description is not a function

和

Uncaught TypeError: this.editdescription is not a function

我已经盯着代码看了好几个小时了，现在似乎无法理解这一点。我可以在这个JSFIDDLE:中复制这个问题

http://jsfiddle.net/N2zNk/49/

有人知道我的代码中有什么漏洞吗？

这是我的HTML:

<table>
    <tr>
        <th>ID</th>
        <th>Description</th>
        <th>Department</th>
        <th>Edit</th>
        <th>Delete</th>
    </tr>
    <tbody data-bind="template: { name: 'rowTmpl', foreach: products }"></tbody>
</table>
<script id="rowTmpl" type="text/html">
    <tr>
        <td data-bind="text: ID"></td>
        <td data-bind="text: Description"></td>
        <td data-bind="text: Composante"></td>
        <td>
            <a href="#dialogEditProduct" data-rel="popup" data-position-to="window" data-transition="pop" data-bind="click: $parent.editProduct">Edit</a>
        </td>
        <td>
            <a href="#" data-bind="click: function() { viewModel.removeItem($data); }">Delete</a>
        </td>
    </tr>
</script>
    <!-- popup -->
    <div id="dialogEditProduct" style="width: 400px; max-width: 100%;" data-role="popup" data-theme="c" data-overlay-theme="a" data-dismissible="false" data-bind="with: selectedProduct">
        <div data-role="header" data-position="inline">
             <h1 ></h1>
        </div>
        <div data-role="content" data-theme="c">
            <p>
                <label>Description:</label>
                <input data-bind="value: editDescription" />
            </p>
            <p>
                <label>Composante:</label>
                <input data-bind="value: editComposante" />
            </p>
            <button data-role="button" data-bind="click: function() { Incidents.pvm.acceptEdit(); }">Save</button>
            <button data-role="button" data-bind="click: function() { Incidents.pvm.cancelEdit() }">Cancel</button>
        </div>
    </div>

这是我的代码：

function Item(ID, Description, Composante) {
    var self = this;
        this.ID = ID;
        this.Description = ko.observable(Description);
    this.Composante = ko.observable(Composante);
        this.editDescription = ko.observable(Description);
    this.editComposante = ko.observable(Composante);    
this.accept = function () {
    this.description(this.editdescription); 
  this.price(this.editPrice);
    return true;
}.bind(this);
//reset to originals on cancel
this.cancel = function () {
    this.editdescription(this.description);
    this.editComposante(this.Composante);
}.bind(this);
}
Incidents = {
pvm: {},
productStore: {
    products: [],
    init: function (data) {
        this.products = $.map(data, function (product) {
            return new Item(product.ID, product.Description, product.Composante);
        });
    }
},  
init: function () {
/*emuluate pulling orders from DB*/
/*this will come from server or local web storage*/
        var dataFromServer = [{
            ID: "123",
            Description: "The server x is unavailable",
            Composante: "CCD"
        }, {
            ID: "124",
            Description: "The router located downtown is down",
            Composante: "CCDD"
        }, {
            ID: "125",
            Description: "Fiber optic cable downtown is flapping",
            Composante: "MIG"
        }, {
            ID: "126",
            Description: "Network unvailable at the beaver site",
            Composante: "MIC"
        }];
  this.productStore.init(dataFromServer);
  $(function () {
    Incidents.pvm = new Incidents.productViewModel(Incidents.productStore.products);
    ko.applyBindings(Incidents.pvm);
    $("#productList").listview('refresh');
  });  
},
productViewModel: function (data) {
        var self = this;
        var productsArray = [];
        if (data && data.length > 0) {
            productsArray = data;
        }
        this.products = ko.observableArray(productsArray);
        this.selectedProduct = ko.observable();
        this.editProduct = function (productToEdit) {
            self.selectedProduct(productToEdit);
            // Incidents.pvm.selectedProduct(productToEdit);
        };
        this.acceptEdit = function () {
            var selected = Incidents.pvm.selectedProduct();
            if (selected.accept()) {
                Incidents.pvm.selectedProduct("");
                $('#dialogEditProduct').popup('close');
            }
        };
        this.cancelEdit = function () {
            Incidents.pvm.selectedProduct().cancel();
            Incidents.pvm.selectedProduct("");
            $('#dialogEditProduct').popup('close');
        };
    }
};
ko.bindingHandlers.jqButton = {
    init: function (element) {
        $(element).button();
    },
    update: function (element, valueAccessor) {
        var currentValue = valueAccessor();
        $(element).button("option", "disabled", currentValue.enable === false);
    }
};
ko.bindingHandlers.jqmListView = {
    init: function (element) {
        $(element).listview();
    },
    update: function (element, valueAccessor) {
        $(element).listview('refresh');
    }
};
ko.bindingHandlers.openProductDialog = {
    update: function (element, valueAccessor) {  
        var value = ko.utils.unwrapObservable(valueAccessor());
        if (value) {
            $.mobile.changePage("#dialogEditProduct", {
                role: 'dialog'
            });
            $("#dialogEditProduct").open();    
            // $("#dialogEditProduct").trigger('create');    
        }
    }
};
$.extend({
    isNumber: function (obj) {
        return !isNaN(parseFloat(obj)) && isFinite(obj);
    }
});
Incidents.init();