为啥我在使用 Knockout JS 时收到“无法读取属性 'nodeType' of null”错误？

Posted 2023-02-22

技术标签:

【中文标题】为啥我在使用 Knockout JS 时收到“无法读取属性 \'nodeType\' of null”错误？【英文标题】：Why am I getting a "Cannot read property 'nodeType' of null" error with Knockout JS?为什么我在使用 Knockout JS 时收到“无法读取属性 'nodeType' of null”错误？ 【发布时间】：2013-02-11 22:58:04 【问题描述】：

今天是我参加 Knockout 的第一天。被它打动了。下面是我使用 knockout.js 的第一个示例代码，它显示了一个错误。

无法读取 null 的属性“nodeType”

这是我的脚本：`

   function ViewModel()  
     
     var self = this;  
     self.n1 = ko.observable(10);  
     self.n2 = ko.observable(10);  
     self.n3 = ko.observable(10);  
     
   ko.applyBindings(new ViewModel());  `

这是我的html：

<body>
<p>Number1:<input data-bind="value:n1"></input></p>
<p>Number2:<input data-bind="value:n2"></input></p>
<p>Number3:<input data-bind="value:n3"></input></p>
</body>

我想知道上述错误的原因以及如何克服它...

【问题讨论】：

【参考方案1】：

我认为 ko.applyBindings(obj);应该写在视图模型下。

<!DOCTYPE html>
<html>
<head>
    <title>KO Examples</title>
    <script type='text/javascript' src='knockout-3.1.0.js'></script>
    <script type='text/javascript' src='jquery.js'></script>
    <script type='text/javascript'>
        var  obj = 
            first_name : 'Gazal Irish'
        ;


    </script>

</head>
<body>
<div>
    <p>My name : <span data-bind="text: first_name"></span>
<p> 
</div>
<script type="text/javascript">

    ko.applyBindings(obj);
</script>

</body>
</html>

【讨论】：

【参考方案2】：

如果你像这样设置你的代码，它会工作的。

<body>
<p>Number1:<input data-bind="value:n1"></p>
<p>Number2:<input data-bind="value:n2"></p>
<p>Number3:<input data-bind="value:n3"></p>
<script src="knockout.js"></script>
<script>

function ViewModel()   
   var self = this;  
   self.n1 = ko.observable(10);  
   self.n2 = ko.observable(10);  
   self.n3 = ko.observable(10);
  

ko.applyBindings(new ViewModel());  `

</script>
</body>

【讨论】：

HTML 是从上到下解析的。因此，如果您在页面顶部包含脚本（例如<head> 部分），它们可以在部分或所有页面元素准备好与之交互之前运行。还有其他方法可以做到这一点（响应 DOM 就绪事件），但将代码放在底部也是如此。另一个提示：<input> 元素没有结束标签。在 html 中，您只需在 XHTML 中将它们写成 <input type="text"> 或 <input type="text"/>。【参考方案3】：

如果您想将<script> 保持在页面顶部，可以使用jQuery 的ready() 函数来延迟初始化，直到页面加载完毕。

$(document).ready(function() 
    ko.applyBindings(new ViewModel());
);

【讨论】：

我不知道它是否有效...无论如何感谢您的宝贵回答...！！！是的，它有效。我和你有同样的错误，这个页面帮助我用 $.ready() 解决它。

以上是关于为啥我在使用 Knockout JS 时收到“无法读取属性 'nodeType' of null”错误？的主要内容，如果未能解决你的问题，请参考以下文章

多视图模型破坏了 knockout.js

在 Knockout.js 中异步应用绑定

knockout.js：更新绑定？

为啥我在 discord.js 中收到客户端错误

为啥我在导入客户端库时收到 ReferenceError: self is not defined？

为啥我在尝试访问此 WordPress 网站时收到此 403 Forbidden 错误？为啥它无法读取 .htaccess 文件？