对象文字和 Sys.WebForms.PageRequestManager.getInstance().add_endRequest 问题答案

【问题标题】：object literal and Sys.WebForms.PageRequestManager.getInstance().add_endRequest issue对象文字和 Sys.WebForms.PageRequestManager.getInstance().add_endRequest 问题
【发布时间】：2011-10-10 15:35:31
【问题描述】：

我得到的是 ASP.NET MasterPage/ContentPage，其中 ContentPage 使用 UpdatePanel 并将 UpdateMode 设置为“Conditional”。这个 ContentPage 基本上是一个 MultiView，它有 3 个视图：Setup、Confirm 和 Complete。我有导航按钮，点击后，转到服务器，做他们需要做的事情，最后更新 UpdatePanel 以便它可以回来。我的问题在于我的 JavaScript。

我有以下名为 PAGE 的全局对象文字：

PAGE = {

    panel : undefined,
    currentView: undefined,

    buttons : {

        all : undefined,
        cont : undefined

    },

    views : {

        setup       : {},
        confirm     : {},
        complete    : {}

    }

};

我的PAGE.init() 函数如下所示：

PAGE.init = function() { console.log("PAGE.init() fired");

    this.panel    = $('div[id$="Panel_Page"]');
    this.currentView  = this.panel.find('input[id$="Hidden_CurrentView"]').val();
    this.buttons.all  = this.panel.find('input[type="submit"]');
    this.buttons.cont = this.panel.find('input[id$="Button_Continue"]');

    this.buttons.all.click(function() { PAGE.panel.hide(); });

    switch (this.currentView) {

        case "confirm"      : this.views.confirm.init();    break;
        case "complete"     : this.views.complete.init();   break;
        default             : this.views.setup.init();      break;

    }

};

最后但并非最不重要的一点是，这一切都是由以下人员开始的：

// Fire events on initial page load.
PAGE.init();

// Fire events for partial postbacks.
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(PAGE.init);

我的问题是，当它第一次触发Page.init() 时，一切都很好，但是，当您单击一个按钮时，它会立即引发错误：Uncaught TypeError: Cannot set property 'all' of undefined。现在我试图弄清楚这一点，但我不知所措。似乎这发生在PAGE 根的ANY 嵌套对象文字上。像PAGE.panel 这样的直接属性工作得很好，但是一旦你需要访问PAGE.buttons.all 或PAGE.views.setup，它就会抛出这个错误。我以前从未见过这种情况。

有什么想法吗？

【问题讨论】：

标签： javascript jquery asp.net updatepanel master-pages

【解决方案1】：

为您的面板属性使用吸气剂。看到其他所有内容似乎都是面板的属性，这应该这样做 - 您可能会在回发期间丢失对面板的引用，因此不是一次获取对象，而是每次都获取它：

get_panel: function() { return $get("Panel_Page"); }

同样，如果我只有 this.panel = $get(myElement)，然后我的部分页面更新破坏了最初创建对象时返回到 this.panel 的节点，this.panel 将变为未定义。使用吸气剂。

希望对您有所帮助 - 编码愉快。

编辑：

实际上 - 现在我再次查看它，您可能希望对所有属性使用 getter，而不是依赖 get_panel().find(..) 来获取 currentView，例如，我会做另一个到达那里：

get_currentView: function() { return $get("Hidden_CurrentView", this.get_panel()); }

【讨论】：

对不起，我的回复晚了，我一直在度假。我不确定当我在每个请求中触发 init() 函数时我会如何丢失我的参考。更不用说，面板甚至不是我的问题所在，因为按钮的基本属性是由于某种原因返回未定义的内容。再看看我在底部的解释。也许我在做什么会更有意义。
@Scott - 你试过用吸气剂代替任何属性吗？只是想知道您是否认为这不是问题所在，或者您尝试过但没有成功，您知道这不是问题所在。每次我遇到与此类似的问题时，都是因为我丢失了对节点的引用。是否可以发布更多代码，以便我可以尝试重现该问题？
您缺少的是它与引用 DOM 的属性无关。丢失该引用适用于没有在每个部分回发时重新初始化的人，这在我的示例中的最后一行代码中很明显。我遇到的问题是我的对象文字属性PAGE.buttons 以某种方式变得未定义。

【解决方案2】：

我没有在PAGE.init() 函数中使用this，而是使用了PAGE，这解决了这个问题。显然this 不是指PAGE，而是PAGE.init。仍然不知道为什么，因为我在其他地方这样做并且它有效。

例如，this 的以下用法有效，它与我在 OP 中的用法没有什么不同：

PAGE.views.setup = {

    buttons : { 

        all : undefined,
        cont : undefined

    },

    init: function() {

        var self = this,
            buttons = self.buttons;

            buttons.all = PAGE.panel.find('input[type="submit"]');

        buttons.all.click(function() { alert(this.id + " clicked"); });

    }

}

【讨论】：