Change Observables list values, and other problems

How-to Discussions
1

Hi there,
I have some probably rather simple questions, since I am new to fuse/js, but I did not find out yet how to solve it, so I hope you can help me.
I have 3 different Problems:

  1. How can I change a value of an observables list? (see useCone function in js for example)
  2. activeConeList shows the same list as coneList, although active is set to 0 initially ?
  3. Before the first cone connected, the coneList Observable should be empty, but in the App I get a button with no text on it, which is still there, when coneList fills up and the correct buttons occur. How can I solve this initial problem?

It would be great if you can help me out or tell me where I can read the information I need.

<cone.Page ux:Class="coneSelectPage">
    <Router ux:Dependency="router" />

    <JavaScript File="coneSelectPage.js" />

    <ScrollView ClipToBounds="true">
    <StackPanel>

        <Panel>
           <cone.Text>Choose</cone.Text>
        </Panel>  

        <Each Items="{coneList}">
	   <cone.Button Text="use {coneID}" Clicked="{useCone}" />
	</Each>

        <Panel>
           <cone.Text>Chosen cones</cone.Text>
        </Panel>  

        <Each Items="{activeConeList}">
           <cone.Button Text="release {coneID}" Clicked="{releaseCone}" />
        </Each>

    </StackPanel>
</ScrollView>

</cone.Page>

var coneList = Observable('');
var activeConeList = coneList.where(function(x) {
  return x.active = 1;
})

function useCone(arg){
  // Do something to set active to 1 for coneID arg.data.coneID
  // e.g.: {coneID: 42, active: 0, status: 0}
  // to: {coneID: 42, active: 1, status 0}
}

Socket.on("onMessageReceived", function(message) {
  readText.value = message;

  if(message.indexOf("new connection")>=0){
    coneList.add({coneID: message.substr(0,message.indexOf(":")), active: 0, status: 0});
  }

  if(message.indexOf("cone disconnected")>=0){
    coneList.removeWhere(function(nr){
    return nr.coneID == message.substr(0,message.indexOf(":"));
    });
  }
});

module.exports = {
 coneList: coneList,
 activeConeList: activeConeList
}
2

Hi Hendrik,

let’s start with the easy ones:

2. activeConeList shows the same list as coneList, although active is set to 0 initially?

I suspect the problem is this line: return x.active = 1; which should instead be return x.active == 1;

3. Before the first cone connected, the coneList Observable should be empty, but in the App I get a button with no text on it, which is still there, when coneList fills up and the correct buttons occur. How can I solve this initial problem?

You initiate the Observable with an empty string as its first value: var coneList = Observable(''); so when you add further elements to it, the empty string still stays there. Change it to: var coneList = Observable();

1. How can I change a value of an observables list? (see useCone function in js for example)

Well, you’re half-way there already. You know that you get the iterated object in arg.data and what you do next with it is strictly your business. You could, for example, iterate over the coneList variable, like so:

coneList.forEach(function(c) {
    if (c.coneID == arg.data.coneID) {
        c.active = 1;
    }
});

This should answer the 3 posted questions here. I believe you’ll have more, but those should be posted in separate threads. There’s also the whole Observable reference for you to look at.

3

Thank you very much for the fast support!