How to bind data from two tables in PhoneJs?

Question

I have two tables:

nom_articole { id(PK), denumire, nom_um_id(FK) }
nom_um { id(PK), simbol, denumire }

I want to display:

nom_articole.id
nom_articole.denumire
nom_um.simbol

My html code:

<div data-options="dxView : { name: 'nom_articoleDetails', title: 'Nom_articole' } " >
<div  data-options="dxContent : { targetPlaceholder: 'content' } " >
    <div data-bind="dxScrollView: { }">
        <h2 data-bind="text: nom_articole.denumire"></h2>
        <div class="dx-fieldset">
            <div class="dx-field">
                <div class="dx-field-label">ID</div>
                <div class="dx-field-value" data-bind="text: nom_articole.id"></div>
            </div>
            <div class="dx-field">
                <div class="dx-field-label">Denumire</div>
                <div class="dx-field-value" data-bind="text: nom_articole.denumire"></div>
            </div>
            <div class="dx-field">
                <div class="dx-field-label">U.M.</div>
                <div class="dx-field-value" data-bind="text: ????????????????"></div>
            </div>
        </div>
        <div data-options="dxContentPlaceholder : { name: 'view-footer', transition: 'none' } " ></div>
    </div>
</div>

My Javascrip code:

MobileApplication.nom_articoleDetails = function(params) {
return {
    id: params.id,
    //nom_um: new MobileApplication.nom_umViewModel(),
    nom_articole: new MobileApplication.nom_articoleViewModel(),

    handleDelete: function() {
        DevExpress.ui.dialog.confirm("Are you sure you want to delete this item?", "Delete item").then($.proxy(function (result) {
            if (result)
                this.handleConfirmDelete();
        }, this));
    },

    handleConfirmDelete: function() {
        MobileApplication.db.nom_articole.remove(params.id).done(function() {
            MobileApplication.app.navigate("nom_articole", { target: "back" });
        });
    },

    viewShown: function() {
        nom_articoleDetails = this;
        MobileApplication.db.nom_articole.byKey(params.id).done(function(data) {
            nom_articoleDetails.nom_articole.fromJS(data);
        });
    }
};

This code was generated by Devexpress multi-channel application wizard.

What is the issue? Does this code cause any error? Please clarify. — amartynov, Jul 17 '13 at 13:37
no, its working, just i cant bind the nom_um.simbol to the third dx-field-value.(i hawe no idea how) — Attila, Jul 17 '13 at 16:42

amartynov · Answer 1 · 2013-07-18T12:06:04.573

From the information you gave, and provided that nom_articole and nom_um share the same key, the code would be:

viewShown: function() {
    // ... your code ...

    MobileApplication.db.nom_um.byKey(params.id).done(function(data) {
        nom_articoleDetails.nom_um.fromJS(data);
    });
}

You uncomment the nom_um member and use text: nom_um.simbol as the binding text in the view.

Update:

To load an object by foreign key, you have two options. The first is cascading fetches:

MobileApplication.db.nom_articole.byKey(19).done(function (data) { 
    nom_articoleDetails.nom_articole.fromJS(data); 

    MobileApplication.db.nom_um.byKey(data.nom_um_id).done(function(data) {
        nom_articoleDetails.nom_um.fromJS(data);
    });
});

The second will work if your data service is properly configured OData. In this case you may use the expand feature:

MobileApplication.db.nom_articole.byKey(19, { expand: "nom_um" }).done(function (data) { 
    // data will contain a nested object
});

P.S. DevExpress provides Support service, and in case you cannot find the right answer here, you can ask them and share the solution.

Thanks for the answer. I want to return from the second table not by id but nom_um_id, Something like this: `viewShown: function (){ nom_articoleDetails = this; MobileApplication.db.nom_articole.byKey(19).done(function (data) { nom_articoleDetails.nom_articole.fromJS(data); }); MobileApplication.db.nom_um.byKey(MobileApplication.db.nom_articole.byKey(19).nom_um_id).done(function (data) { nom_articoleDetails.nom_um.fromJS(data); }); }` But it doesn't work. — Attila, Jul 18 '13 at 08:03
Thank you for the updated answer. I have changed the viewShown as you mentioned in the first solution but I get this error: 'Uncaught ReferenceError: data is not defined', line 41, file 'http://localhost:60252/views/nom_articole/nom_articole-details.js'. Here the 'data' is the data in this sequence '... byKey(data.nom_um_id) ...' — Attila, Jul 19 '13 at 05:58

How to bind data from two tables in PhoneJs?

1 Answers1