可编辑解析为未定义的混合KnockOutJS和普通Javascript_Javascript_Knockout.js_Undefined

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

javascript knockout.js

可编辑解析为未定义的混合KnockOutJS和普通Javascript,javascript,knockout.js,undefined,Javascript,Knockout.js,Undefined,我尝试使用knockoutjs中的选项绑定创建一个下拉菜单（确切地说是ko.plus）。在我将我的解决方案与这个JSFIDLE混合在一起之前，一切都按照预期运行：以便在列表中放置一个默认选项。问题在于“这里”（请参阅代码）我在哪里得到的错误消息 “TypeError:this.FieldStreetAppallou不是函数” 正如我所说，我没有问题，我认为将普通javascript与KO混合在一起导致了这种情况。我试图打开可编辑文件，但运气不佳，因为它已解析为未定义。即使是ko.toJS也不起

我尝试使用knockoutjs中的选项绑定创建一个下拉菜单（确切地说是ko.plus）。在我将我的解决方案与这个JSFIDLE混合在一起之前，一切都按照预期运行：以便在列表中放置一个默认选项。问题在于“这里”（请参阅代码）我在哪里得到的错误消息

“TypeError:this.FieldStreetAppallou不是函数”

正如我所说，我没有问题，我认为将普通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>

///HTML
///////Javascript
ko.observearray.fn.find=函数（道具、数据）{
var valueToMatch=数据[prop]；
return ko.utils.arrayFirst（this（），函数（item）{
返回项目[prop]==valueToMatch；
});
};
var可用公司=[{
抵销：1，
名称：“公司1”
}, {
抵销：2，
名称：“公司2”
}
//…这里有更多双
];
//下拉菜单的默认对
var selectedCompanyApallou={
抵销：1，
名称：“公司1”
};
var ViewModel=功能（公司可用，所选公司为PALLOU）{
this.availableCompaniesApallou=ko.observableArray（availableCompanies）；
this.selectedCompanyApallou=ko.observable（this.availableCompaniesApallou.find（“offset”，selectedCompanyApallou））；
this.fieldStreetApallou=ko.editable（“初始值”）；
PostStreetFieldToServerForAppallou=函数（）{
$.ajax({
键入：“放置”，
url:“http://www.san-soft.com/goandwin/addresses/" + 15,
contentType:“application/x-www-form-urlencoded；charset=utf-8”，
数据：“Address_id=15&Street=“+this.fieldStreetApallou（）//我认为您链接到了错误的JSFIDLE
当点击按钮调用PostStreetFieldToServerForAppallou

时，看起来

此

不是您所期望的。JavaScript中的

此

基于调用函数的人

在这种情况下，为了解决这个问题，我喜欢在视图模型的顶部设置

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

var ViewModel=function（公司可用，所选公司为Pallou）{
var self=这个；
self.availableCompaniesApallou=ko.observearray（availableCompanies）；
self.selectedCompanyApallou=ko.observable（self.availableCompaniesApallou.find（“offset”，selectedCompanyApallou））；
self.fieldStreetApallou=ko.editable（“初始值”）；
PostStreetFieldToServerForAppallou=函数（）{
$.ajax({
键入：“放置”，
url:“http://www.san-soft.com/goandwin/addresses/" + 15,
contentType:“application/x-www-form-urlencoded；charset=utf-8”，
数据：“Address_id=15&Street=“+self.fieldStreetApallou（）//我认为您链接到了错误的JSFIDLE
当点击按钮调用PostStreetFieldToServerForAppallou