Knockout结合Monaco：关闭模态框后编辑器未更新问题求助

主页面的Monaco编辑器绑定了Knockout的expression可观察对象，点击编辑按钮打开模态框修改值后，主页面的expression已正确更新，但Monaco编辑器未同步显示新值，绑定同一值的普通文本框却能正常刷新。

问题原因 #

当前的Knockout绑定处理器activityExpressionMonacoEditor仅在init阶段初始化了编辑器的初始值，没有监听expression可观察对象的变化，因此当模态框修改后的值同步到主视图模型时，编辑器无法感知到变化并更新内容。

解决步骤 #

1. 给绑定处理器添加update方法 #

Knockout的绑定处理器通过update方法响应可观察对象的变化，我们需要在这里实现编辑器内容的同步更新。

2. 避免全局编辑器实例冲突 #

不要用全局变量存储编辑器实例，而是将实例挂载到DOM元素的自定义属性中，防止多个编辑器实例互相覆盖。

3. 防止循环更新 #

更新编辑器内容时，暂时关闭编辑器的内容变更监听，避免编辑器自身的onDidChangeContent事件触发视图模型更新，造成循环操作。

修改后的代码 #

主视图模型（无需修改） #

原有的ActivityExpressionViewModel和EditExpressionViewModel逻辑正常，只需调整绑定处理器：

绑定处理器修改 #

ko.bindingHandlers.activityExpressionMonacoEditor = {
    init: function (element, valueAccessor, allBindingsAccessor, bindingContext) {
        const currentViewModel = allBindingsAccessor().currentViewModel;
        // 创建编辑器实例并存储到元素自定义属性
        const monacoEditor = monaco.editor.create(element, {
            codeLens: false,
            language: 'c#'
        });
        element._monacoEditor = monacoEditor;

        // 初始化编辑器值
        monacoEditor.setValue(currentViewModel.expression());

        // 监听编辑器内容变化，同步到视图模型
        const contentChangeListener = monacoEditor.getModel().onDidChangeContent(event => {
            const value = monacoEditor.getValue();
            currentViewModel.expression(value);
        });
        // 存储监听器，方便后续暂停/重建
        element._contentChangeListener = contentChangeListener;

        monacoEditor.onDidBlurEditorText((event) => {
            currentViewModel?.ValidateExpression();
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor, bindingContext) {
        const currentViewModel = allBindingsAccessor().currentViewModel;
        const monacoEditor = element._monacoEditor;
        if (!monacoEditor) return;

        const newValue = currentViewModel.expression();
        const currentValue = monacoEditor.getValue();
        // 值不同时才更新，避免无效操作
        if (newValue !== currentValue) {
            const contentChangeListener = element._contentChangeListener;
            // 暂时销毁监听器，防止循环更新
            contentChangeListener.dispose();
            monacoEditor.setValue(newValue);
            // 重建监听器
            const newListener = monacoEditor.getModel().onDidChangeContent(event => {
                const value = monacoEditor.getValue();
                currentViewModel.expression(value);
            });
            element._contentChangeListener = newListener;
        }
    }
};

额外优化建议 #

• 页面销毁时，记得销毁Monaco编辑器实例和对应的监听器，避免内存泄漏。
• 如果不使用jQuery，用element._xxx存储实例和监听器是轻量的替代方案，也可以用element.dataset实现。

内容的提问来源于stack exchange，提问作者Will Comeaux