Databind doesn't work with elements in Observables

How-to Discussions
1

Hey. It seems i don’t quite understand the principles of observables. Following examples:

What do i want to achieve: I use a list to show some contacts and if i press on one of them the detail view opens where i can edit it, but the firstname and the lastname has to be filled. So i recieve the contact in the details js per router.push(“details”, { contact: contact });

Details JS-File:

var Observable = require("FuseJS/Observable");
var params = this.Parameter;

var contact = params.map(function(x) { return x.contact });
var firstname = params.map(function(x) { return x.contact.firstname });

function logData(){
	console.log("firstname: " + firstname);
	console.log("lastname: " + contact.value.lastname);
}

module.exports = {
	firstname: firstname,
	contact: contact
}

I databind them in the .ux-File like (shortened) :

<TextView Value="{firstname}" />
<TextView Value="{contact.lastname} />

<Button Clicked="{logData} />

My contact has the values “firstname: Max” and “lastname: Mustermann”.

If i press the button the logs say Max Mustermann. So far so good. But if i change the data in the UI from Max Mustermann to Peter Parker
i get “Peter Mustermann” in the logs.

So why does databinding not work with contact.lastname?
For example if my contact has 100 elements do i really have to write a new variable for every element so i can databind them to the UI and change them?

2

Only the high-level export is actually the Observable. The lastname is just a field in the object. These are inherently one-way in data binding.

map is also only a one-way mapping. The modified value will not make it back to the original object (in some special cases it might, but that’s more of a leak than an intended effect). The upcoming release (QA channel) has mapTwoWay to do this correctly. For simple field selections the pickTwoWay is what you’d want.

exports.lastname = contact.pickTwoWay("lastname")
exports.firstname = contact.pickTwoWay("firstname")

You might have another problem though. The router paths are string only, the object will be JSON serialized and one-way only. To modify a contact you would normally pass an ID of that contact, and use JS lookup code to get at the actual contact object. Think of routes as URLs.

3

Okay, Thanks for the reply, but if i try to use

exports.lastname = contact.pickTwoWay("lastname")

the monitor says :

Error message: Uncaught TypeError: contact.pickTwoWay is not a function
File name: Pages/ContactDetailsPage/ContactDetails.js
Line number: 62
Source line: exports.firstname = contact.pickTwoWay("lastname");

Also i can’t find any documentation or anything about pickTwoWay

4

pickTwoWay is in the pending QA release, not in the current release. The docs should be updated when it is released.

5

Fuse 0.33 is now released, and the docs for pickTwoWay can be found here https://www.fusetools.com/docs/fusejs/observable-api#picktwoway-index