如何在 NativeScript 中使用转换器？

Question

我正在尝试在 {N} 中使用一个简单的转换器。到目前为止，我已经阅读了https://docs.nativescript.org/core-concepts/data-binding#using-converters-in-bindings 的文档大约 14 次，但我不理解这个概念，因为文档似乎非常模糊。他们使用了一个半成品的 dateConverter 示例，而且他们确实......

source.set("dateConverter", dateConverter);
source.set("testDate", new Date());
page.bindingContext = source;

...没有解释“来源”来自哪里或他们如何设置它？另外，我已经分配了page.bindingContext，所以我不知道如何将它与文档中提供的示例联系起来。

这是我的 XML 文件：

<page navigatingTo="onNavigatingTo" backgroundColor="orange">
    <action-bar title="{{ name, name | uppercase }}" class="action-bar" />

    <stack-layout orientation="vertical" verticalAlignment="center">
        <label text="Welcome to Page-B" textAlignment="center" />
    </stack-layout>
</page>

我希望 actionBar 的标题大写，所以我添加了一个 uppercase 转换器（或至少尝试这样做）。下面是对应的js文件：

exports.onNavigatingTo = function(args) {
    var page = args.object;
    page.bindingContext = page.navigationContext;

    var uppercase = {
        toView: function(value) {
            console.log(`value: ${value}`);
            return value.toUpperCase();
        }
    }
}

我收到错误：找不到函数或过滤器：大写

我知道我在某处缺少某种绑定，将转换器绑定到其他东西，但我不知道该怎么做。任何人都可以提供一个基于此的小例子吗？

我已经看到了类似的问题Using nativescript converters，但这并没有帮助，因为我也没有使用 Angular（只是普通的 NativeScript/JS），而且该帖子也没有有意义的结论性答案。

Answer 1

uppercase 方法应该是您的视图模型的一部分，因为您将它绑定到您的 XML 中。关于普通 JS 和/或 TypeScript 项目中的转换器的详细文章部分可以找到here

例如

var uppercase = {
    toView: function(value) {
        console.log(`value: ${value}`);
        return value.toUpperCase();
    }
}


myViewModel.set("uppercase", uppercase); // e.g. myViewModel === new Observable();

page.bindingContext = myViewModel;

Answer 2

好的，我发现尼克的回答有什么问题，基于此，此代码有效：

exports.onNavigatingTo = function(args) {
    var page = args.object;

    var uppercase = {
        toView: function(value) {
            console.log(`value: ${value}`);
            return value.toUpperCase();
        }
    }

    var myViewModel = page.navigationContext;
    myViewModel.uppercase = uppercase;
    page.bindingContext = myViewModel;
}