How to set data with binding into child array


#1

for example I have data like this:
data={
name:“john”,
lastname:“smith”,
jsonArr[{item1:“one”,item2:“two”}]
}

what if I want to set the item2 only in data and not whole data.

I know ->> viewModel.set(‘data’, someData);
but is it possible to do something like this? viewModel.set(data.jsonArr[0].item2,“new value”);


#2

If you’re using a ListView to display your array, then it may be that all you need to do is make your array changes and refresh the list view, with something like

listView = page.getViewById('myListView');
listView.refresh();

#3

thanks, this is nice, but in my case i’m using accordion plugin and in accordion item I’ve got complex view with 2 textfields and more…

problem is: accordion requires items source, so i have items source and inside it textfield1 and textfield2 values to show default text when load, for example: "select date,
after load I have date picker and I want to set picked date to this textfield.


#4

Can you help me here? @dlcole


#5

add visibility to that field like this:

<Label text="whatever" visibility="{{streetnumberVisibility}}" />

and change streetnumberVisibility from view model depending on city picker selected index,
“visible” or “collapse”


#6

Hi @Giorgius, I am using json metadata to construct the form. So I am not sure how and where to add

Label text=“whatever” visibility="{{streetnumberVisibility}}" />

Also, can you give me more insight of where to make changes in the view model. Here is my view model.ts file

import fs = require(“tns-core-modules/file-system”);
import observable = require(“tns-core-modules/data/observable”);

export class PersonViewModel extends observable.Observable {

constructor() {
    super();

    var documents = fs.knownFolders.currentApp();
    var jsonPersonFile = documents.getFile('person-model.json');
    var that = new WeakRef(this);
    jsonPersonFile.readText()
        .then(function (content) {
            try {
                var person = JSON.parse(content);
                that.get().set("person", person);
            } catch (err) {
                throw new Error('Could not parse JSON file');
            }
        }, function (error) {
            throw new Error('Could not read JSON file');
        });

    var jsonMetadataFile = documents.getFile('person-metadata.json');
    jsonMetadataFile.readText()
        .then(function (content) {
            try {
                var metadata = JSON.parse(content);
                that.get().set("metadata", metadata);
            } catch (err) {
                throw new Error('Could not parse JSON file');
            }
        }, function (error) {
            throw new Error('Could not read JSON file');
        });
}

}


#7

where is the streetnumber inside person-metdata?


#8

didn’t quite get what you need but here is the json file named person-metadata.json, I am using.

{
“isReadOnly”: false,
“commitMode”: “Immediate”,
“validationMode”: “Immediate”,
“propertyAnnotations”:
[
{
“name”: “name”,
“displayName”: “Name”,
“index”: 0
},
{
“name”: “age”,
“displayName”: “Age”,
“index”: 1,
“editor”: “Number”
},
{
“name”: “email”,
“displayName”: “E-Mail”,
“index”: 2,
“editor”: “Email”
},
{
“name”: “city”,
“displayName”: “City”,
“index”: 3,
“editor”: “Picker”,
“valuesProvider”: [“New York”, “Washington”, “Los Angeles”]

},
{
  "name": "street",
  "displayName": "Street Name",
  "index": 4,
  "visibility": "false"
},
{
  "name": "streetNumber",
  "displayName": "Street Number",
  "index": 5,
  "editor": "Number"
}

]
}

As you can see I am using this json to build the form, and another json to populate it at the same time

The other json is person-model.json
Here it is,
{
“name”: “John”,
“age”: 23,
“email”: "john@company.com",
“city”: “New York”,
“street”: “5th Avenue”,
“streetNumber”: 11
}


#9

Here is my XML

<Page.actionBar>


</Page.actionBar>

<df:RadDataForm id=“myDataForm” source="{{ person }}" metadata="{{ metadata }}" />

Herei is my typescript file:

import viewModel = require("./person-model");
import dataFormModule = require(“nativescript-ui-dataform”);
import {EventData, Observable} from “data/observable”;
import {Page} from “ui/page”;

var dataform;

export function onPageLoaded(args) {
var page = args.object;
page.bindingContext = new viewModel.PersonViewModel();
dataform = page.getViewById(“myDataForm”);
}


#10

@Giorgius Will it be possible to make the changes you suggested when using json file to build the UI dataform?


#11

I’m sure it will be possible but unfortunatelly I’m not good at angular, I’m working on nativescript core


#12

Oh I figured it out. Thanks for your advice, I was able to get a clue. Also, I am not using Angular here,


#13

lol i didnt read the code it looked like angular :smiley: