Question

我是新来的淘汰赛并且热爱它到目前为止。我一直在尝试使用带编辑链接的简单表格来构建行编辑网格。到目前为止，它看起来似乎很好，但一直坚持这个问题，我在收集保存和更新或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();

Answer 1

Javascript区分大小写。您混淆了description和Description。此外，editDescription和editdescription。

Knockout-弹出问题编辑项目

1 个答案: