Nativescript RadDataForm convert属性不适用于json数组

时间:2019-08-23 11:04:43

标签: javascript typescript nativescript nativescript-vue

提交表单后,我得到了具有id和name属性的json数组,我得到了NaN我想将转换器代码从Typescript转换为Javascript 我创建了一个Playground示例

文件:Data.js

    { id: 123, name: 'Zootopia' },
    { id: 217, name: 'Captain America' },
    { id: 324, name: 'The Jungle Book' }
];

export class MovieConverter {
    constructor(_movies) {
        this._movies = _movies;
    }
    convertFrom(id) {
        return this._movies.filter((movie) => movie.id === id)[0].name;
    }
    convertTo(name) {
        return this._movies.filter((movie) => movie.name === name)[0].id;
    }
}

Test.vue

<template>
    <Page>
        <ActionBar :title="Simple">
            <NavigationButton text="Back" android.systemIcon="ic_menu_back"
                @tap="onNavigationButtonTap"></NavigationButton>
        </ActionBar>

        <StackLayout>
            <Button text="Button" @tap="onSubmit" />
            <RadDataForm :source="ticket" :metadata="ticketMetadata" />
        </StackLayout>
    </Page>
</template>

<script>
    import Home from "./Home";
    import {
        Movies,
        MovieConverter
    } from "../Data";

    //const movies = getMovies();

    export default {
        methods: {
            onNavigationButtonTap() {
                this.$navigateTo(Home);
            }
        },
        mounted() {
            console.log("movies", Movies);

            Movies.map(Movie => {
                console.log(Movie.name);
            });
        },
        data() {
            return {
                ticket: {
                    movie: 123,
                    date: "2016-04-06",
                    time: "20:00",
                    type: "2D",
                    price: 9.5,
                    numberOfTickets: 2,
                    contactName: null,
                    contactPhone: null,
                    contactEmail: null,
                    agreeTerms: false
                },
                ticketMetadata: {
                    isReadOnly: false,
                    commitMode: "Immediate",
                    validationMode: "Immediate",
                    propertyAnnotations: [{
                            name: "movie",
                            displayName: "Movie Name",
                            index: 0,
                            editor: "Picker",
                            valuesProvider: Movies.map(Movie => Movie.name),
                            converter: new MovieConverter(Movies)
                        },
                        {
                            name: "date",
                            displayName: "Date",
                            index: 1,
                            editor: "DatePicker",
                            hintText: "This is a hint for you"
                        },
                        {
                            name: "time",
                            displayName: "Time",
                            index: 2,
                            editor: "TimePicker"
                        },
                        {
                            name: "type",
                            displayName: "Type",
                            index: 3,
                            editor: "SegmentedEditor",
                            valuesProvider: ["2D", "3D"]
                        },
                        {
                            name: "price",
                            displayName: "Price",
                            index: 4,
                            editor: "Decimal",
                            readOnly: true
                        },
                        {
                            name: "numberOfTickets",
                            displayName: "Number Of Tickets",
                            index: 5,
                            editor: "Stepper",
                            editorParams: {
                                minimum: 0,
                                maximum: 20,
                                step: 2
                            }
                        },
                        {
                            name: "contactName",
                            displayName: "Contact Name",
                            index: 6,
                            editor: "Text"
                        },
                        {
                            name: "contactPhone",
                            displayName: "Contact Phone",
                            index: 7,
                            editor: "Phone"
                        },
                        {
                            name: "contactEmail",
                            displayName: "Contact Email",
                            index: 8,
                            editor: "Email"
                        },
                        {
                            name: "agreeTerms",
                            displayName: "I Agree with Terms",
                            index: 9,
                            editor: "Switch"
                        }
                    ]
                }
            };
        },
        methods: {
            onSubmit() {
                console.log("submit", this.ticket.movie);
            }
        }
    };
</script>

<style>
</style>

表格onSubmit()之后,我应该得到“提交” 123 但得到“提交” NaN。

我查看了转换器的文档,它显示了一个具有2种方法convertFrom()convertTo()的类,由于所有文档都使用打字稿,并且我使用的是JavaScript,因此我认为这是不正确的。

0 个答案:

没有答案