NativeScript：从导入的函数中更新viewModel

我来帮你搞定这个问题！核心原因很简单：你在main.js和functions.js里创建了两个完全独立的viewModel实例——main.js里的是绑定到页面的那个，而functions.js里自己新建的Observable和它半毛钱关系都没有，所以你修改后者的属性自然不会反映到页面上。

正确的解决方案：传递页面的viewModel实例给工具函数 #

你之前尝试传参数没生效，大概率是没正确使用传入的实例。我们直接把页面绑定的那个viewModel传给工具函数，让函数直接操作它：

修改后的main.js

import { ApplicationSettings, Http, fromObject } from '@nativescript/core';
import * as commFunc from '../functions.js';

var page, viewModel = fromObject({ foo: 'bar' }); // fromObject本身返回Observable，无需new

export function onLoaded(args){
    page = args.object;
    page.bindingContext = viewModel;
    // 把页面的viewModel作为参数传给工具函数
    commFunc.getPosition(viewModel);
}

修改后的functions.js

import { ApplicationSettings, Http } from '@nativescript/core';

// 不需要自己新建viewModel，直接使用传入的页面绑定实例
export function getPosition(viewModel){
    // 这里可以加入你的HTTP请求逻辑，比如：
    Http.getJSON('https://your-target-api.com/position')
        .then((response) => {
            // 请求成功后直接更新传入的viewModel属性
            viewModel.foo = response.data;
        })
        .catch((error) => {
            console.error('请求失败:', error);
            // 可以在这里处理错误，比如给viewModel设置错误提示
            viewModel.foo = '加载失败';
        });

    // 先模拟同步修改验证效果
    // viewModel.foo = 'baz';
}

为什么这个方法有效？ #

现在工具函数操作的是和页面绑定的同一个viewModel实例，所有属性修改都会自动触发UI更新——这正是NS8的Observable机制的核心：只有绑定到页面的实例发生变化时，UI才会响应。

额外小提示 #

如果你的工具函数需要频繁操作同一个viewModel，也可以考虑把工具函数封装成一个类，在初始化时传入viewModel，这样就不用每次调用都传参了，比如：

// functions.js
export class CommFunc {
    constructor(viewModel) {
        this.viewModel = viewModel;
    }

    getPosition() {
        // 直接使用this.viewModel操作
        Http.getJSON('...').then(res => {
            this.viewModel.foo = res.data;
        });
    }
}

// main.js里初始化
import { CommFunc } from '../functions.js';
const commFunc = new CommFunc(viewModel);
commFunc.getPosition();

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