Local data implementation for master-detail view in NativeScript

element.js

let { fileSystemService } = require("./fileSystemService")
fileSystemService = new fileSystemService("list.json")

const frame = require("ui/frame")

exports.onLoaded = (args) => {
    const page = args.object
    page.bindingContext = page.navigationContext.model
}

exports.onDoneTap = (args) => {
    const page = args.object
    fileSystemService.saveElement(page.bindingContext)
    frame.topmost().navigate({
        moduleName: "list"
    })
}

fileSystemService.js

const fileSystem = require("file-system")

exports.fileSystemService = class fileSystemService {
    constructor (filename) {
        this.file = fileSystem.knownFolders.documents().getFile(filename)
    }
    
    getList () {
        if (this.file.readTextSync().length !== 0) {
            return JSON.parse(this.file.readTextSync())
        }
        return []
    }
    
    saveElement (currentElement) {
        const list = this.getList()

        // look for current element ID on list
        const index = list.findIndex(savedElement => savedElement.id === currentElement.id)

        // if match found,
        if (index !== -1) {
            // update that element
            list[index] = {
                id: currentElement.id,
                title: currentElement.title,
                gender: currentElement.gender,
                year: currentElement.year,
                month: currentElement.month,
                day: currentElement.day
            }
        // if match not found,
        } else {
            // push new element to list
            list.push({
                id: currentElement.id,
                title: currentElement.title,
                gender: currentElement.gender,
                year: currentElement.year,
                month: currentElement.month,
                day: currentElement.day
            })
        }

        // finally write the array to this.file
        this.file.writeText(JSON.stringify(list))
    }
}

list.js

let { fileSystemService } = require("./fileSystemService")
fileSystemService = new fileSystemService("list.json")

const observable = require("data/observable")
const observableArray = require("data/observable-array")
const frame = require("ui/frame")

function elementModel (id) {
    return new observable.fromObject({
        id,
        title: "",
        // ...
    })
}

exports.onLoaded = (args) => {
    const page = args.object
    
    // initialize list array
    const data = new observable.fromObject({
        list: new observableArray.ObservableArray()
    })
    
    // load list
    const list = fileSystemService.getList()
    
    // if list is not empty,
    if (list.length !== 0) {
        // make every element from list a model
        list.forEach(function (item) {
            const model = new elementModel(item.id)
            model.title = item.title
            // ...
            data.list.push(model)
        })
    }
    page.bindingContext = data
}

exports.onAddTap = (args) => {
    const page = args.object
    const data = page.bindingContext

    frame.topmost().navigate({
        moduleName: "element",
        context: { model: new elementModel(data.list.length) }
    })
}

exports.onItemTap = (args) => {
    const page = args.object
    const data = page.bindingContext

    frame.topmost().navigate({
        moduleName: "element",
        context: { model: data.list.getItem(args.index) }
    })
}