Nativescript视图模型数据绑定不仅适用于一个页面

时间:2016-11-19 15:17:47

标签: javascript nativescript

编辑:我在我的应用中测试了所有其他页面,方法是在viewModel中添加一个警告来触发页面加载,除了这个特定的页面外,它都会触发。

昨天晚上我工作的时候工作,但今天不是。我在这个页面上保存sql db中的一些数据。我觉得它很简单,但我需要帮助解决这个问题......我不会努力。

newschedule.js:

var Sqlite = require("nativescript-sqlite");
var FrameModule = require("ui/frame");
var createViewModel = require("./newschedule-view-model").createViewModel;
var PickerManager= require("nativescript-timedatepicker");


exports.pageLoaded = function (args) {
page = args.object;
}

exports.onNavigatingTo = function (args) {
var page = args.object;
(new Sqlite("app.db")).then(db => {
    db.execSQL("CREATE TABLE IF NOT EXISTS schedules (id INTEGER PRIMARY KEY AUTOINCREMENT, course_id INTEGER, scheduleName TEXT, scheduleTime TEXT, scheduleVenue TEXT, scheduleDate, TEXT)").then(id => {
        page.bindingContext = createViewModel(db, page.navigationContext.courseId);
    }, error => {
        console.log("CREATE TABLE ERROR", error);
    });
}, error => {
    console.log("OPEN DB ERROR", error);
});
   }

newschedule-view-model.js:

var ObservableArray = require("data/observable-array").ObservableArray;
var Observable = require("data/observable").Observable;
var Sqlite = require("nativescript-sqlite");
var Dialogs = require("ui/dialogs");
var PickerManager = require("nativescript-timedatepicker");



function createViewModel(database, courseId) {
var viewModel = new Observable();
viewModel.schedules = new ObservableArray([]);

viewModel.title = "You have a new lecture";
viewModel.courseId = courseId;
viewModel.scheduleName = "";
viewModel.scheduleTime = getTime();
viewModel.scheduleVenue = "";
viewModel.scheduleDate = "";
viewModel.scheduleYear = getYear();
viewModel.scheduleMonth = getMonth();
viewModel.scheduleDay = getDay();


viewModel.insert = function() {
        database.execSQL("INSERT INTO schedules (course_id, scheduleName, scheduleTime, scheduleVenue, scheduleDate) VALUES (?, ?, ?, ?, ?)", [this.courseId, this.scheduleName, this.scheduleTime, this.scheduleVenue, this.scheduleDate]).then(id => {
            this.schedules.push(result.text);
        }, error => {
            console.log("INSERT ERROR", error);
        });

    }

viewModel.timeTap = function () {

    var mCallback = function (result) {
        if (result) {

            alert(result);
        }
    };
    PickerManager.init(mCallback,null,null);
    PickerManager.showTimePickerDialog();
}

return viewModel;
}

exports.createViewModel = createViewModel;

newschedule.xml:应该在newschedule-view-model中触发事件的{{insert}}和{{timeTap}}都不起作用。

<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
xmlns:Card="nativescript-cardview"
xmlns:x="nativescript-statusbar"
loaded="pageLoaded" navigatingTo="onNavigatingTo">
<x:StatusBar ios:barStyle="light" android:barStyle="red" />

<Page.actionBar>
    <ActionBar title="Add New Course Schedule">
        <NavigationButton text="Back" android.systemIcon = "ic_menu_back" tap="gobackTap"/>
    </ActionBar>
</Page.actionBar>

<ScrollView>
    <StackLayout class="new-schedule">
        <GridLayout cols="*" rows="auto, auto">
            <Label text="Schedule Name: " cssClass="field-title" padding-top="20"/>
            <TextField id="scheduleName" text="{{ scheduleName }}" cssClass="field" row="1" col="1" />
        </GridLayout>  
        <GridLayout cols="*" rows="auto, auto">
            <Label text="Venue: " cssClass="field-title"/>
            <TextField id="scheduleVenue" text="{{ scheduleVenue }}" cssClass="field" row="1" col="1"/>
        </GridLayout>
        <GridLayout cols="*" rows="auto, auto">
            <Button text="Set Time" tap="{{ timeTap }}" />
        </GridLayout>
        <GridLayout cols="*" rows="auto, auto">
            <Button class="saveScheduleButton" text="Save Schedule" tap="{{insert}}"/>
        </GridLayout>
    </StackLayout>
</ScrollView>

</Page>

0 个答案:

没有答案