可编辑解析为未定义的混合KnockOutJS和纯Javascript

Question

我试图使用KnockOut JS中的选项绑定创建一个下拉菜单（准确地说是ko.plus）。事情按预期运行，直到我将我的解决方案与这个 jsfiddle：http://jsfiddle.net/jnuc6y05/混合在一起，以便在列表中放置默认选项。问题出在"这里"（请参阅代码）我得到的地方错误信息

"TypeError： this.fieldStreetApallou 不是函数"

正如我所说，我没有问题，我认为将普通的javascript与KO混合导致了这种情况。我试图解开可编辑的包装，但没有运气，因为它解析为未定义。甚至ko.toJS也没有做到这一点（再次未定义）。

我对KO和Javascript没有任何认真的经验，任何帮助将不胜感激。

PS：提供减少的代码

/////// HTML
    <input data-bind="value: fieldStreetApallou, enable: fieldStreetApallou.isEditing" />
        <a href="#" data-bind="visible: !fieldStreetApallou.isEditing(), click: fieldStreetApallou.beginEdit">Rename</a>
    <div data-bind="visible: fieldStreetApallou.isEditing">
        <a href="#" data-bind="click: function() { fieldStreetApallou.endEdit(); postStreetFieldToServerForApallou(); }"> Confirm</a>
        <a href="#" data-bind="click: fieldStreetApallou.cancelEdit"> Cancel</a>
    </div>
    /////// Javascript
    <script type="text/javascript">
        ko.observableArray.fn.find = function(prop, data) {
            var valueToMatch = data[prop];
            return ko.utils.arrayFirst(this(), function(item) {
                return item[prop] === valueToMatch;
            });
        };
        var availableCompanies = [{
            offset: 1,
            name: "Company1"
        }, {
            offset: 2,
            name: "Company2"
        }
         // ...more pairs here
        ];

        //Default pairs for the drop-down menus
        var selectedCompanyApallou = {
            offset: 1,
            name: "Company1"
        };
        var ViewModel = function(availableCompanies, selectedCompanyApallou) {
            this.availableCompaniesApallou = ko.observableArray(availableCompanies);
            this.selectedCompanyApallou = ko.observable(this.availableCompaniesApallou.find("offset", selectedCompanyApallou));
            this.fieldStreetApallou = ko.editable("Initial value");
            postStreetFieldToServerForApallou = function() {
                $.ajax({
                    type: "PUT",
                    url: "http://www.san-soft.com/goandwin/addresses/" + 15,
                    contentType: "application/x-www-form-urlencoded; charset=utf-8",
                    data: "Address_id=15&Street=" + this.fieldStreetApallou() //<---- HERE!
                }).done(function(data) {
                    alert("Record Updated Successfully " + data.status);
                }).fail(function(err) {
                    alert("Error Occured, Please Reload the Page and Try Again " + err.status);
                });
            };
        };
        ko.applyBindings(new ViewModel(availableCompanies, selectedCompanyApallou));
    </script>

Answer 1

我认为

你链接到了错误的JSFiddle。

看起来this不是您期望的，当按钮单击调用postStreetFieldToServerForApallou时。 JavaScript 中的this基于谁调用了函数。

在这种情况下，为了解决它，我喜欢在视图模型的顶部设置var self = this;，以便self始终指向视图模型，然后我用 self 替换所有this实例。 这实际上只在您的 HERE 行上需要，但它简化了整个self的使用。

固定视图模型代码：

var ViewModel = function(availableCompanies, selectedCompanyApallou) {
    var self = this;
    self.availableCompaniesApallou = ko.observableArray(availableCompanies);
    self.selectedCompanyApallou = ko.observable(self.availableCompaniesApallou.find("offset", selectedCompanyApallou));
    self.fieldStreetApallou = ko.editable("Initial value");
    postStreetFieldToServerForApallou = function() {
        $.ajax({
            type: "PUT",
            url: "http://www.san-soft.com/goandwin/addresses/" + 15,
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            data: "Address_id=15&Street=" + self.fieldStreetApallou() //<---- HERE!
        }).done(function(data) {
            alert("Record Updated Successfully " + data.status);
        }).fail(function(err) {
            alert("Error Occured, Please Reload the Page and Try Again " + err.status);
        });
    };
};