binding on ux:template

How-to Discussions
1

I am reading a barcode, binding it to name1 variable and trying to use the variable to get a set of data from an observable.

set of data is a js file and looks something like this ;

var Observable = require("FuseJS/Observable");

var rest= Observable();

rest=[
	{
		did: 0,

		barcode: "mado",

        restaurant: "Mado Cadde",

        urun: [ { title: 'Klasik Kesme Dondurma tabağı', imaget: "Assets/Mado/o1.png", price: 14.50, rating: 3},
              //  { title: 'Geleneksel Doğallık', imaget: "Assets/Mado/G_Dogal.png", fiyat: 13.50, Rating: 3.5},
               // { title: 'Mado Kesme Dondurma Tabağı', imaget: "Assets/Mado/M_Kesme_Dondurma.png", fiyat: 13.50, Rating: 3.2},
               // { title: 'Karamelli Kesme Dondurma Tabağı', imaget: "Assets/Mado/KK_Dondurma.png", fiyat: 11.00, Rating: 3.8},
               // { title: 'Bademli Çikolatalı Portakallı Kesme Dondurma Tabağı', imaget: "Assets/Mado/BCPK_Dondurma.png", fiyat: 13.50, Rating: 4},
               // { title: 'Balkabağı Soslu Kesme Dondurma Tabağı ', imaget: "Assets/Mado/BSK_Dondurma.png", fiyat: 13.50, Rating: 4},
               // { title: 'Frambuaz Soslu Kesme Dondurma Tabağı ', imaget: "Assets/Mado/FSK_Dondurma.png", fiyat: 13.00, Rating: 3.3}
                
                ]},
	{
		did: 1,
		barcode: "midpoint",
        restaurant: "Midpoint Cadde",
        urun: [ { title: 'BOĞAZ KEBAP', desc:"Şişte ızgara bonfile, domates sos, yoğurtlu köz patlıcan ve kibrit patates ile...", imaget: "Assets/Mado/qr.png", price: 39.50, rating: 4},
                { title: 'KÜLBASTI', desc:"İnce yaprak ızgara et, pilav ve patates ile...", imaget: "Assets/Mado/qr.png", price: 39.50, rating: 4},
                { title: 'SCHINITZEL MILANESE', desc:"Elmalı roka salatası ile...", imaget: "Assets/Mado/qr.png", price: 39.50, rating: 4},
                { title: 'OVA KEBAP', desc:"Tereyağı ile lezzetlenmiş pide parçaları üzerine frın antrikot, nokut ve yoğurt ile....", imaget: "Assets/Mado/qr.png", price: 39.50, rating: 4},
                { title: 'KÜLBASTI', desc:"İnce yaprak ızgara et, pilav ve patates ile...", imaget: "Assets/Mado/qr.png", price: 39.50, rating: 4},
                { title: 'KÜLBASTI', desc:"İnce yaprak ızgara et, pilav ve patates ile...", imaget: "Assets/Mado/qr.png", price: 39.50, rating: 4},
                { title: 'KÜLBASTI', desc:"İnce yaprak ızgara et, pilav ve patates ile...", imaget: "Assets/Mado/qr.png", price: 39.50, rating: 4},
                { title: 'KÜLBASTI', desc:"İnce yaprak ızgara et, pilav ve patates ile...", imaget: "Assets/Mado/qr.png", price: 39.50, rating: 4},

               // { title: 'Karamelli Kesme Dondurma Tabağı', imaget: "Assets/Mado/KK_Dondurma.png", fiyat: 11.00, Rating: 3.8},
               // { title: 'Bademli Çikolatalı Portakallı Kesme Dondurma Tabağı', imaget: "Assets/Mado/BCPK_Dondurma.png", fiyat: 13.50, Rating: 4},
              
            ],}
	
        ];

I read a name from a forerunnerDB database using the following code and use it to get the details from the js file above;

p2qrl= hcollection.find({}, {
	                    $aggregate: "name"
        });
        console.log("Aggregated");
        UIMessage=("Aggragated..."); 
        name.value=UIMessaged;
        name1.value=p2qrl[0];

At UX side I want to show the data corresponding to name1.
THE UX CODE,

                <StackPanel Dock="Top">
                    <Text>Status:</Text>
                    <Text Value="{UIMessaged}">
                    <Clicked>
                        <Callback Handler="{processp}" />
                    </Clicked>
                    </Text>
                    <Each Items="{rest}" MatchKey="barcode"> 
                    <StackPanel ux:Template="{name1}">
                        <Text Value="{barcode}" />  
                        <Each Items="{urun}">
                        <Grid Rows="1*,1*" Height="100">
                            <StackPanel Color="#072884" Height="90" Opacity="0.9" Layer="Background" Margin="0,0,0,10">
                             <Grid ColumnCount="2" Columns="auto,1*" Height="100">
                                    <Text Column= "1" Value="{title}       {price}" FontSize="16" Color="#FFF" Alignment="CenterRight" Margin="0,-10,0,0" />
                                    <Text Column= "1" Value="{desc}" FontSize="10" Color="#FFF" Alignment="CenterLeft" Margin="20,35,0,0" />
                                    <Image Column= "0" StretchMode="PointPrefer" File="{imaget}" Alignment="CenterLeft" Opacity="0.9" Margin="0,0,0,10">
                                    </Image>
                            </Grid>  
                            </StackPanel>
                        </Grid>    
                        </Each>
                    </StackPanel>
                    </Each>

When I write mado at code instead of “{name1}”, I get the correct result. but when I bind it, it does not work:/

 <Each Items="{rest}" MatchKey="barcode"> 
                    <StackPanel ux:Template="{name1}">

I have been informed that databinding on ux:template does not work but how do I take care of this then ?

2

You’re asking how do I take care of this then? but you have not explained what it is that you are trying to take care of.

You have explained HOW you are trying to solve a particular use case (and didn’t succeed), but what is the use case? What are you trying to make / create / do / achieve?

What I’m implying is that there’s probably a better solution than what you think the right solution is. We’re in no position to offer the right solution until we understand the use case.

3

Hello Uldis,

I read data from the database and put it in to a variable called “name1”.

The aim is to use that variable to get data from the js file above.

The data I want to get is;
{title},
{price}
{desc}
and {imaget}
corresponding to the data set under either barcode: mado or barcode: midpoint.
To get the correct set of data, (name1 is either mado or midpoint in this case) I want to use the value of the variable “name1”.
So if I cannot assign a variable to ux:template, what is the correct way to do that ?

4

It sounds like all you need is filtering on Observable condition. If you want different layout, you can use WhileString on the Observable that receives the mado or midpoint value.

The list of items would get reactively filtered on JS side, and UX would only display the list of items.

5

I see, I was hoping to resolve it on the UX side.
Thanks for your help.
Cheers

6

Uldis wrote:

It sounds like all you need is filtering on Observable condition. If you want different layout, you can use WhileString on the Observable that receives the mado or midpoint value.

The list of items would get reactively filtered on JS side, and UX would only display the list of items.

I could not find an example to use the while string class, can you please share a simple example on how to use it ?

7

The WhileString docs don’t have a usage example, but should provide a pretty good idea anyway.

It’s generally as simple as:

<WhileString Equals="mado">
    <!-- ... -->
</WhileString>