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

e.g。

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

好的，我弄清楚Nick的答案出了什么问题，基于此，这段代码有效：

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;
}

如何在NativeScript中使用转换器？

2 个答案: