Knockout.js ViewModel中引用未定义属性的解决方案

Knockout.js ViewModel初始化中的引用问题

在knockout.js应用开发中，我们经常需要在viewmodel内部定义多个属性，其中一些属性的值可能依赖于viewmodel中的其他属性。然而，在viewmodel对象字面量（object literal）的初始化阶段，直接引用自身尚未完全定义的属性会导致运行时错误，典型的错误信息为cannot read properties of undefined (reading 'propertyname')。

考虑以下场景：一个ViewModel包含一个loadingVisible的Observable变量，以及一个loadOptions配置对象。loadOptions中的visible属性需要引用loadingVisible的值。

错误示例代码：

var viewModel = {
    loadingVisible: ko.observable(false),
    loadOptions: {
        visible: viewModel.loadingVisible(), // 错误：此时viewModel尚未完全定义
        showIndicator: true,
        showPane: true,
        shading: true,
        hideOnOutsideClick: false,
        shadingColor: 'rgba(0,0,0,0.4)',
    },
};

// HTML
// <div class="loadpanel" data-bind="dxLoadPanel: loadOptions"></div>

上述代码中，当JavaScript解释器尝试初始化viewModel.loadOptions时，它会去查找viewModel.loadingVisible()。然而，此时viewModel对象本身还在构建过程中，loadingVisible属性尚未被完全赋值到viewModel上，因此viewModel在当前上下文表现为undefined，从而引发了“无法读取未定义属性”的错误。

错误的根源分析

这个问题的核心在于JavaScript的对象字面量初始化顺序。当您定义一个对象时，其内部属性是按顺序解析和赋值的。在一个属性被完全赋值之前，它不能被该对象字面量内部的其他属性引用。在上面的例子中，loadingVisible被定义为viewModel的第一个属性，但当解释器处理到loadOptions时，viewModel这个变量本身还没有完全指向这个新创建的对象实例。

解决方案：外部引用与共享变量

解决此问题的最简单且推荐的方法是，将相互依赖的Observable变量提升到ViewModel对象字面量外部进行定义。这样，在ViewModel内部初始化任何属性时，这些外部定义的变量都已经是可访问和已定义的。

360智图

AI驱动的图片版权查询平台

143

查看详情

正确示例代码：

// 1. 将依赖的Observable变量定义在ViewModel外部
var loadingVisible = ko.observable(false);

var viewModel = {
    // 2. ViewModel内部可以引用这个外部变量
    loadingVisible: loadingVisible, // 将外部变量赋值给ViewModel的属性
    loadOptions: {
        visible: loadingVisible, // 直接引用外部的loadingVisible Observable
        showIndicator: true,
        showPane: true,
        shading: true,
        hideOnOutsideClick: false,
        shadingColor: 'rgba(0,0,0,0.4)',
    },
    // 3. 添加一个方法来演示如何修改这个Observable
    toggleVisible: function(){
        loadingVisible(!loadingVisible()); // 修改外部的Observable
    }
};

// 应用绑定
ko.applyBindings(viewModel);

对应的HTML结构：

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<!-- 使用data-bind="visible: loadOptions.visible" 来控制元素的可见性 -->
<div class="loadpanel" data-bind="visible: loadOptions.visible">
    <ul><li>加载中...</li></ul>
</div>

<!-- 按钮用于切换loadingVisible的状态 -->
<button data-bind="click: toggleVisible">切换加载状态</button>

解释：

1. 外部定义 loadingVisible： var loadingVisible = ko.observable(false); 这一行代码在ViewModel定义之前执行，确保loadingVisible作为一个独立的、已初始化的Observable变量存在于当前作用域中。
2. ViewModel内部引用： 在viewModel对象字面量内部，loadingVisible属性被赋值为外部的loadingVisible变量。更重要的是，loadOptions.visible属性也直接引用了这个外部的loadingVisible变量。由于loadingVisible此时已是完全定义的Observable，因此不会再出现undefined错误。
3. 响应式更新： 当toggleVisible函数被调用时，它会修改外部的loadingVisible Observable。由于loadOptions.visible直接绑定到这个Observable，并且HTML中的data-bind="visible: loadOptions.visible"也间接或直接地监听了这个Observable，UI将会自动更新以反映loadingVisible状态的变化。

注意事项与最佳实践

• 作用域管理： 将Observable变量定义在ViewModel外部，意味着它在当前作用域内是可访问的。对于复杂的应用，可以考虑将相关的ViewModel和其依赖的Observable封装在IIFE（立即执行函数表达式）中，以避免全局污染。
• 依赖注入： 对于更复杂的依赖关系，特别是当ViewModel之间存在依赖时，可以考虑使用依赖注入模式，将依赖作为参数传递给ViewModel的构造函数。
• 避免循环引用： 确保您的ViewModel属性初始化逻辑没有造成循环引用，这可能导致内存泄漏或难以调试的问题。
• 使用 this 关键字： 如果您是在ViewModel的构造函数或方法内部引用其他属性，this 关键字通常是可用的。例如，在一个方法中，this.loadingVisible() 是正确的。但如本文所示，在对象字面量初始化阶段，this或viewModel可能尚未完全指向当前实例。

总结

在Knockout.js ViewModel中处理属性间的依赖关系时，理解JavaScript对象初始化时的作用域和执行顺序至关重要。通过将共享的或相互依赖的Observable变量提升到ViewModel外部进行定义，可以有效避免Cannot read properties of undefined的错误，并构建出更加健壮和可维护的Knockout.js应用。这种模式不仅解决了初始化问题，也使得ViewModel内部的结构更加清晰，易于理解和管理。

以上就是Knockout.js ViewModel中引用未定义属性的解决方案的详细内容，更多请关注php中文网其它相关文章！