从JSFiddle移植的Knockout.js分页网格代码运行报错，如何解决？

开发者阿泽

2026-5-21

解决Knockout分页网格单HTML文件运行报错问题

我来帮你分析下这个报错的原因和解决办法：

你提到把jsfiddle上的分页网格示例整合到单HTML文件后，控制台抛出了Uncaught TypeError: Cannot read property 'viewModel' of undefined at new PagedGridModel (knockout pagination.html:72) at knockout pagination.html:83这个错误。

先看你提供的部分HTML代码：

错误核心原因 #
这个报错本质是依赖加载顺序错误：在KnockoutJS库还没完全加载、ko对象还未定义的情况下，你的PagedGridModel代码就先执行了，导致代码里依赖的Knockout相关对象（或者你自定义的某个核心对象）变成了undefined，进而访问viewModel属性时触发错误。另外也有可能是你整合代码时不小心删掉了原示例中某个关键的父级viewModel对象定义。
具体修复步骤
确保KnockoutJS优先加载
在你的HTML文件<head>标签里，首先引入KnockoutJS的库文件（使用本地下载的版本即可），这一步必须放在所有自定义的Knockout模型代码之前，比如：
<script src="knockout-latest.min.js"></script>
包裹自定义代码，确保资源加载完成
把你的PagedGridModel定义和初始化代码，用DOMContentLoaded事件包裹，确保页面所有资源都加载完毕后再执行代码，避免因DOM未就绪或依赖未加载导致的错误：
document.addEventListener('DOMContentLoaded', function() {
    // 这里放你的PagedGridModel完整定义
    function PagedGridModel(items) {
        // 还原原示例中的模型逻辑，比如：
        this.items = ko.observableArray(items);
        this.currentPageIndex = ko.observable(0);
        this.pageSize = 5;
        // 其他分页相关的计算属性和方法
        // 注意检查这里是否有访问某个未定义对象的viewModel属性的代码，若有要确保该对象已正确定义
    }

    // 初始化数据与ViewModel
    var initialData = [/* 原示例中的初始数据集合 */];
    var viewModel = new PagedGridModel(initialData);
    ko.applyBindings(viewModel);
});
核对原示例的完整代码
对比原jsfiddle示例的代码，检查是否遗漏了某些关键的对象定义或依赖逻辑——比如原示例中可能有一个全局或父级的viewModel对象，你整合时不小心漏掉了，这也会导致访问viewModel属性时出现undefined的错误。
内容的提问来源于stack exchange，提问作者DZN

从JSFiddle移植的Knockout.js分页网格代码运行报错，如何解决？

具体修复步骤 #

具体修复步骤