0

请问,有人可以帮我解决这个问题吗?

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

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

从以下绑定调用此方法:

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

当从PreLoad方法调用read方法时,baseUriitems都可用。

当视图模型被定义为一个函数时,我找到了解决这个问题的方法,但在我的例子中,它被定义为一个对象。

这是我的完整 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”的组合。无论如何,我也需要访问项目,以更新列表中显示的值。

谢谢!

4

3 回答 3

0

我有一种感觉this,不是你打电话时想的那样products.create。尝试使用.bind明确设置上下文:

<form id="createProducts" data-bind="submit: products.create.bind($data)">
于 2012-11-19T01:57:28.117 回答
0

正如 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 应该指向您的视图模型,因此您将传递 products 对象的实例来创建函数。

于 2012-11-19T08:54:18.407 回答
0

有两种方法可以确保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));
于 2012-11-19T21:22:53.947 回答