NativeScript updating UI on ObservableArray change

Question

I have NativeScript vanillaJS app with list of items (as array) and "like" button on the side to update data in the array which should reflect to UI but it does not. When ever I call function sendFeedback() it should change data in the array what should reflect as a change in the UI but that's not the case.

Here is my object with Observable array:

let viewModel = observableModule.fromObject({      
    myData: new ObservableArray.ObservableArray([])
});

myData receives data with content:

     [{
        "id": "43", 
        "itemStatus": "negative"
      }, {
        "id": "44", 
        "itemStatus": "negative"
     }]

My View is:

<ListView items="{{ myData }}">
    <Label class="{{ 'list-item ' + (itemStatus === 'positive' ? ' fas': ' fal') }}" tap="sendFeedback" idArtikla="{{ id }}" stanjeFav="{{ itemStatus }}" text="Send feedback" height="40"/>   
</ListView>

Here is my Module function:

function sendFeedback(args){
    const status        = args.object; 
    const itemStatus     = status.itemStatus; 
    if(stanjeFav === "negative"){ 
        viewModel.myData[0].itemStatus = "positive";
        // some other code here  
    } else {  
        viewModel.myData[0].itemStatus = "negative";
        // some other code here
    }   
}

exports.sendFeedback = sendFeedback;

I have list with 50+ items and on the item tap I want to switch the class. Can someone help me with pointing me in the correct direction please. I have more complex code behind but this is just enough to give you idea.

Thanks!

Manoj · Accepted Answer · 2019-09-17 00:00:57Z

1

ObservableArray is only responsible for monitoring changes like on Array (like adding new item, removing existing one).

It doesn't detect changes on attributes within a item, you will have to refresh the list or use Observables inside ObservableArray.

new observableArrayModule.ObservableArray([
  observableModule.fromObject({ name: "Hello", tapped: false }),
  observableModule.fromObject({ name: "World", tapped: false })
])

Playground Sample

answered Sep 17, 2019 at 0:00

Manoj

21.9k3 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Maka Over a year ago

Hi Manoj, thanks for giving example. I have different structure of view where I have ListView and in each item there is "like" button just like on Instagram. When I hit button it should change a color. Now, when I hit that button it does trigger function to save that specific item as "liked". I am receiving http response as JSON data. I do not know how to populate observableModule.fromObject({}), which is inside observableArrayModule.ObservableArray.

Maka Over a year ago

Update: I had to make small changes to my code and use .push(). It works now perfectly just as I needed. I do not know how is that going to reflect on speed and memory usage. Thanks!

Collectives™ on Stack Overflow

NativeScript updating UI on ObservableArray change

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related