如何使用 Javascript 项目在 nativescript-sidekick 中使用预填充的 sqlite 数据库

Question

我目前正在尝试使用 JavaScript 项目连接到 NativeScript-Sidekick 中预填充的 Sqlite 数据库。我浏览了很多教程和视频，但它们都包含 Angular。是否有任何代码允许 JavaScript 项目与数据库交互？比如允许TextField根据他们所在的列被SELECT中拉取的内容填充？

这是我到目前为止的代码，与教程等类似，但他们确实使用了 Telerik：

这是 home-items-page.xml

<Page
navigatingTo="onNavigatingTo"  
xmlns="http://schemas.nativescript.org/tns.xsd">

<StackLayout>
    <TextField id="firstname" hint="Fist Name" text="{{ firstname }}"/>
    <TextField id="lastname" hint="Last Name" text="{{ lastname }}" />
    <StackLayout orientation="horizontal">
        <Button text="Insert" tap="{{ insert }}" />
        <Button text="Select" tap="{{ select }}" />
    </StackLayout>
</StackLayout>
</Page>

home-items-page.js

var createViewModel = require("./home-items-view-model").createViewModel;
var Sqlite = require("nativescript-sqlite");

function onNavigatingTo(args) {
var page = args.object;
if (!Sqlite.exists("eatforlife.db")) {
Sqlite.copyDatabase("eatforlife.db");
}

var db_name = "eatforlife.db";

new Sqlite(db_name).then(db => {
    page.bindingContext = createViewModel(db);
});

}

exports.onNavigatingTo = onNavigatingTo;

主页项目视图模型

const observableModule = require("tns-core-modules/data/observable");
var Sqlite = require("nativescript-sqlite");

function createViewModel(db) {
var viewModel = Observable();

viewModel.firstname = "";
viewModel.lastname = "";

    viewModel.select = function(){
    db.all("SELECT * FROM client WHERE Email = ? AND Password = ?",["example@gmail.com","qwerty123"]).then(rows => {
        for(var row in rows){
            console.log("RESULT ", rows[row]);

        }
    }, error =>{
        console.log("SELECT ERROR",error);
    })
    }

return viewModel;
}

exports.createViewModel = createViewModel;

Answer 1

你应该在 Observable 上使用 getter and setter 方法，比如

viewModel.set("firstname", YourFirstNameFromDB);
viewModel.set("lastname", YourLastNameFromDB);

假设您想从 DB 中获取单行，您可以使用 get 方法而不是全部。

Answer 2

我让 Textfields 使用 Observables

在 tap 上更改为 SQLite 数据

更新了 home-items-page.js

var createViewModel = require("./home-items-view-model").createViewModel;
var Sqlite = require("nativescript-sqlite");

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

if (!Sqlite.exists("eatforlife.sqlite")) {
 Sqlite.copyDatabase("eatforlife.sqlite");
}

var db_name = "eatforlife.sqlite";

new Sqlite(db_name).then(db => {
    page.bindingContext = createViewModel(db);
 });

}

exports.onNavigatingTo = onNavigatingTo;

更新了 home-items-view-model.js

const Observable = require("tns-core-modules/data/observable").Observable;
const fromObject = require("tns-core-modules/data/observable").fromObject;

const fromObjectRecursive = require("tns-core- 
modules/data/observable").fromObjectRecursive;

var dialogs = require("tns-core-modules/ui/dialogs");
var Sqlite = require("nativescript-sqlite");

function createViewModel(db) {
 var viewModel = new Observable();


viewModel.select = function () {
    db.get("SELECT * FROM client").then(rows => {

        viewModel.set("setname", rows[10]);
        viewModel.set("setsurname",rows[11]);

        viewModel.set("name",this.get("setname"));
        viewModel.set("surname", this.get("setsurname"));

    }, error => {
        console.log("SELECT ERROR", error);
    });
  }

 return viewModel;
}

exports.createViewModel = createViewModel;

更新了 home-items-page.xml

<Page
 navigatingTo="onNavigatingTo"  
 xmlns="http://schemas.nativescript.org/tns.xsd">

<StackLayout>
    <Label id="name" text="{{ name }}"/>
    <Label id="surname" text="{{ surname }}" />
    <StackLayout orientation="horizontal">
        <Button text="Insert" tap="{{ insert }}" />
        <Button text="Select" tap="{{ select }}" />
     </StackLayout>
 </StackLayout>
</Page>

我希望这对其他人有用，并感谢 Manoj