Knockout- Issues editing item with pop up

Question

Im new to knockout and loving it so far. I've been trying to build a row editing grid using a simple table with edit links. So far it seemed to be going great but been stuck on this issue where im getting the errors when tying to save and update or canel:

Uncaught TypeError: this.description is not a function

and

Uncaught TypeError: this.editdescription is not a function

Been staring at the code for several hours now can't seem to wrap my head around this one. I am able to replicate the issue in this JSFIDDLE:

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

Would anyone know what is cloging in my code?

Here is my 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>

Here is my code:

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(); 

Answer 1

Javascript is case sensitive. You have mixed up description and Description . Also, editDescription and editdescription .