可观察到的未在对象文字内部剔除中定义 [英] observable not defined inside object literal knockout

问题描述

我在淘汰视图模型的对象常量中定义了一个可观察的对象.现在，当我运行该应用程序时.它无法访问observable.

I have a observable defined inside a object literal of a knockout viewmodel . Now when I ran the application .Its unable to access the observable .

$(function () {
  var viewModel =    {
    Folders: ['Inbox', 'Archive', 'Sent', 'Spam'],
    Title: ko.observable("My View Model Test"),
    SelectedFolder: ko.observable(),
    Mails: ko.observableArray(),
    SelectedMail: ko.observable(),
    SelectedChoices: ko.observable(false),


    navigate: function (folder) {           
        SelectedFolder(folder);
        $.ajax({
            url: "/Api/MailBox",
            data: { folder: folder },
            success: function (data) {
                self.Mails(data);
            },
            statusCode: {
                404: function () {
                    console.log("No Mails");
                }
            }

        });
    }
};
}

当我将click事件绑定到navigate函数时.它说SelectedFolder是undefined.有人可以告诉我为什么它无法访问navigate函数内部的SelectedFolder可观察对象吗?

when I have bind the click event to navigate function . It says SelectedFolder is undefined . Can someone tell me why is it unable to access the SelectedFolder observable inside the navigate function ?

推荐答案

在导航方法运行时，它寻找可观察到的SelectedFolder时，首先要在导航方法的上下文中寻找它.如果失败，它将跳转到父上下文，即页面准备就绪时正在运行的匿名函数.如果失败，它将跳转到全局上下文-在此处找不到SelectedFolder，因此它放弃了.

When the navigate method is running and it looks for the SelectedFolder observable, it first looks for it in the context of the navigate method. Failing that, it jumps up to the parent context, which is the anonymous function being run when the page is ready. Failing that, it jumps to the global context - it can't find SelectedFolder there, so it then gives up.

要解决此问题，请更改导航方法以引用viewModel变量，该变量可在页面准备就绪时正在运行的匿名函数的上下文中使用:

To fix this, change your navigate method to reference the viewModel variable that is available in the context of the anonymous function being run when the page is ready:

navigate: function (folder) {           
  viewModel.SelectedFolder(folder);
  $.ajax({
    url: "/Api/MailBox",
    data: { folder: folder },
    success: function (data) {
      viewModel.Mails(data);
    },
    ...

请注意，我还在成功回调中添加了对viewModel的引用，以便它可以找到可观察到的邮件.

Note that I also added a reference to the viewModel in the success callback so that it could find the Mails observable.

这应该可行，但是，我建议考虑更改结构，以使导航方法不依赖于特定的全局变量.这是一种方法:

This should work, however, I would recommend considering changing your structure so that your navigate method isn't dependent on specific global variables. Here is one way:

var myViewModel = function() {
    var self = this;
    self.Folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
    self.Title = ko.observable("My View Model Test");
    self.SelectedFolder = ko.observable();
    self.Mails = ko.observableArray();
    self.SelectedMail = ko.observable();
    self.SelectedChoices = ko.observable(false);

    self.navigate = function (folder) {           
        self.SelectedFolder(folder);
        $.ajax({
            url: "/Api/MailBox",
            data: { folder: folder },
            success: function (data) {
                self.Mails(data);
            },
            statusCode: {
                404: function () {
                    console.log("No Mails");
                }
            }

        });
    };
};

$(function () {
  var ViewModel = new myViewModel();
  ko.applyBindings(viewModel);
});

这篇关于可观察到的未在对象文字内部剔除中定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！