Custom Component - All instances firing same method, not just the one I'm interacting with

General
1

SetDescription.ux:

<Page ux:Class="SetDescription" ux:Name="self">
    <JavaScript File="SetDescription.js" />

    <Rectangle CornerRadius="5" Fill="#FFF">
        <StackPanel Margin="20,5,20,5" ItemSpacing="5">
            <TextView FontSize="16" TextColor="#5D5E5E" ValueChanged="{descriptionChanged}" TextWrapping="Wrap"
                      PlaceholderText="Enter a description..." PlaceholderColor="#C8C7CC" />
        </StackPanel>
    </Rectangle>

</Page>

SetDescription.js:

function descriptionChanged(obj) {
  debug_log("SetDescription.descriptionChanged()");
}

module.exports = {
  descriptionChanged:   descriptionChanged
};

I am using this component on 3 different Pages, and everytime I update any of them, I see the debug output 3 times instead of just once like I’d expect. I’m only intercting with one at a time ever, with different parent components in different parts of my app.

Example:

...
<Navigator>
...
    <SetDescription />
...
</Navigator>
...
<Navigator>
...
    <SetDescription />
...
</Navigator>
...
2

Hold off here… I’ve rebuilt my test project to minimize a bit and it’s not firing multiple times as I had suspected it would. So it’s something else integrated into my project that must be causing it. Hard part is finding out what. :wink:

I’ll report back soon!

3

Ok the root of the problem is that I have TextView Value="{Description}" ValueChanged="{DescriptionChanged}"

When Description updates elsewhere, ValueChanged fires. What I want is to only fire ValueChanged when that particular instance of the TextView is changed (like when typing), not when Description (which is an Observable) changes elsewhere.

How can I accomplish that? I need to have the Value set for when I am editing an existing value, and then want to be able to update from there.

4

I’m having a bit of trouble understanding what the issue is, but it looks like you’re getting DescriptionChanged called multiple times whenever any of the components are used to edit the description? Or am I misunderstanding?

5

Yes, and ultimately it made sense to me because using Description as an Observable was updating it’s binding and firing DescriptionChanged whenever it was changed in any of the instances. I was able to fix this by ultimately making a different Observable for each instance.

So, even though I have one Model property, I used an Observable in my exports per instance.

In Model.js

var Description = Observable();

Then in SetDescription.js

module.exports = {
    localDescription: Observalbe(function() {
        return Model.Description;
    })
};

Then I bind to localDescription and that seemed to allow the updates to happen but only per instance.

6

Aha, yeah that makes sense.