淘汰赛-如何从嵌套函数访问父属性？

Question

拜托，有人可以帮我吗？

执行create方法时出现以下错误：

*Uncaught TypeError: Object #<Object> has no method 'baseUri'*

从以下绑定中调用此方法：

<form id="createProducts" data-bind="submit: products.create">

当执行读取方法，从预压方法调用，既baseUri和项目可用。

当视图模型定义为函数时，我已经找到了解决此问题的方法，但就我而言，它是作为对象定义的。

这是我完整的JS文件

---

var mm = {

    /* Products ********************************************************** */

    products: {

        items: ko.observableArray([]),

        read: function () {
            $.getJSON(this.baseUri(), this.items);
        },

        create: function (formElement) {

            $.post(this.baseUri(), $(formElement).serialize(), null, "json")
                .done(function (o) {                    
                    alert("The Product " + o.Name + " was created.");
                    this.items.push(o);
                });
        },

        baseUri: function () { return BASE_URI; }
    }

};

function PreLoad() {

    mm.products.read();

    ko.applyBindings(mm);
}

---

• BASE_URI是在我的主页中定义的全局变量，我需要它，因为我有多个嵌套的视图模型（我从此代码中删除了它们），并且每个baseUri都是BASE_URI +“ some_string_value”的组合。 无论如何，我也需要访问项目 ，以便更新列表中显示的值。

谢谢！

Answer 1

我感觉this不是您打电话给products.create时所想的。 尝试使用.bind显式设置上下文：

<form id="createProducts" data-bind="submit: products.create.bind($data)">

Answer 2

正如安德鲁·惠特克（Andrew Whitaker）已经提到的那样-“这”将不是您期望的上下文。 我的解决方案是存储“ this”引用（例如称为“ self”）并使用它代替“ this”：

products: {
    self: undefined,
    items: ...,
    init: function() { 
        this.self = this; 
    },
    read: function () {$.getJSON(self.baseUri(), self.items);},
    create: function () {
        $.post(self.baseUri(), $(formElement).serialize(), null, "json")
            .done(function (o) {                    
                alert("The Product " + o.Name + " was created.");
                self.items.push(o);
            });
    },
    baseUri: function () { return BASE_URI; }
};

function PreLoad() {

    mm.products.init();
    mm.products.read();

    ko.applyBindings(mm);
}

您还可以明确指出应在哪种上下文中调用函数：

<form id="createProducts" data-bind="submit: function () { products.create($root.products); }">

products: {
    create: function(self) {
        ...
    }

在这种情况下，$ root应该指向您的视图模型，因此您将传递product对象的实例来创建函数。

Answer 3

有两种方法可以确保在绑定事件时this是正确的。

首先是使用bind ：

<form id="createProducts" data-bind="submit: products.create.bind(products)">

第二种是使用内联函数：

<form id="createProducts" data-bind="submit: function() { products.create(); }">

将来这种行为可能会改变（请参阅https://github.com/SteveSanderson/knockout/issues/378 ）。

编辑

有两种解决方案可以在回调函数中使用this方法。 首先是将其复制到本地变量， this变量可以通过闭包使用。

        var self = this;
        $.post(this.baseUri(), $(formElement).serialize(), null, "json")
            .done(function (o) {                    
                alert("The Product " + o.Name + " was created.");
                self.items.push(o);
            });

第二种是在回调函数上使用bind 。

        $.post(this.baseUri(), $(formElement).serialize(), null, "json")
            .done(function (o) {                    
                alert("The Product " + o.Name + " was created.");
                this.items.push(o);
            }.bind(this));