淘汰赛：无法读取未定义的属性“x”答案

【问题标题】：Knockout: Cannot read property 'x' of undefined淘汰赛：无法读取未定义的属性“x”
【发布时间】：2017-09-10 02:03:38
【问题描述】：

在 beforeAppear 中调用 widget.Test() 时，我收到 Uncaught TypeError: Cannot read property 'target' of undefined。

define(
          //-------------------------------------------------------------------
          // DEPENDENCIES
          //-------------------------------------------------------------------
        ['knockout'],

        // -------------------------------------------------------------------
        // MODULE DEFINITION
        // -------------------------------------------------------------------
        function (ko) {

        "use strict";

        return {

            First_Arr: ko.observableArray(['arrayItem0', 'arrayItem1', 'arrayItem2', 'arrayItem3']),
            Second_Arr: ko.observableArray(['arrayItem0', 'arrayItem1', 'arrayItem2']),

            Test: function(widget, event) {            

                var element = event.target;          
                var pathname = location.pathname;
                var anotherArray = [
                    ["/some-url-path", widget.First_Arr()],
                    ["/some-other-url-path", widget.Second_Arr()]
                ];

                for (var i = 0; i < anotherArray.length; i++) {
                    // Do some stuff and console.log the array items                        
                }

            },

            beforeAppear: function(page) {

                var widget = this;
                widget.Test();

            }
        }
    }
);

奇怪的是，例如，如果我在视图中创建一个按钮：

<button id="btn-click" data-bind="click: Test">test</button>

然后单击它，然后我得到了预期的结果，即按预期将数组的内容打印到控制台。

PS。我尝试注释掉 var element = event.target; 行，因为我认为这是问题的根源，但这只是产生了以下内容：Uncaught TypeError: Cannot read property 'First_Arr() ' 的未定义。

对这个有点不知所措。任何帮助都会有所帮助。

【问题讨论】：

此问题是否已解决，或者您仍然无法正常工作？

标签： javascript arrays mvvm knockout.js

【解决方案1】：

当您调用 widget.Test() 时，您没有向它传递事件参数，因此 event 将未定义，event.target 将出错，因为 target 在“未定义”中不存在。在点击绑定中，点击“事件”会自动传递给函数。

第二个问题是var widget = this; 本质上是设置widget = beforeAppear;。在函数中，“this”指的是函数本身。见How does the "this" keyword work?

与其将模块定义为对象字面量，不如使用构造函数来获得更好的运气。见Should I be using object literals or constructor functions?

这可能看起来像：

define(
          //-------------------------------------------------------------------
          // DEPENDENCIES
          //-------------------------------------------------------------------
        ['knockout'],

        // -------------------------------------------------------------------
        // MODULE DEFINITION
        // -------------------------------------------------------------------
        function (ko) {

        "use strict";

        return function(){
            var self = this;

            self.First_Arr = ko.observableArray(['arrayItem0', 'arrayItem1', 'arrayItem2', 'arrayItem3']);
            self.Second_Arr = ko.observableArray(['arrayItem0', 'arrayItem1', 'arrayItem2']);

            self.Test = function(widget, event) { 
                var element = event.target;          
                var pathname = location.pathname;
                var anotherArray = [
                    ["/some-url-path", self.First_Arr()],
                    ["/some-other-url-path", self.Second_Arr()]
                ];

                for (var i = 0; i < anotherArray.length; i++) {
                    // Do some stuff and console.log the array items                        
                }    
            }

            self.beforeAppear = function(page) {
                //var widget = this;
                self.Test();    
            }
        }();
    }
);

【讨论】：