Display relations between models (many-to-one) in a list

[Djamy]

Hello there !

I'm a super-noob here and my question may seems totally obvious for you guys but i'm totally lost and I'm here to find salvation :)

What I want to do ?

I want to display relation of my model in a list.

How am I trying to do so ?

I'm using the backend services to store my datas and I created two Types. One for my Recipes (I'm trying to create a recipes application) and another for my ingredients named Elements.
So, I created a Recipe called "Recipe 1" in which I linked 2 elements in a field name Elements.

Here is my Recipes table structure:

Id Identifier
CreatedAt Date
TimeModifiedAt DateTime
CreatedBy <-> Users Relation
ModifiedBy <-> Users Relation
Owner <-> Users Relation
Name Text
Elements <-> Elements Relation (multiple)

Now, I don't know how to retrieve Elements' names neither how to create my model..

<!-- my view -->
<div id="status-container" class="user-status-wrp cf" data-role="listview" data-style="inset">
    <div class="recipe-content">
        <h2 id="recipeName" class="recipe-name" data-bind='text: Name'></h2>
        <span id="activityDate" class="time-span" data-bind="text: CreatedAtFormatted"></span>
        <ul data-bind="source: " data-template="elementsTemplate" data-role="listview" data-style="inset">
        </ul>
    </div>
</div>

<!-- my template -->
<script type="text/x-kendo-template" id="elementsTemplate">
    <li data-role="touch">#:Id#</li>
</script>

/**
 * Recipes view model
 */

var app = app || {};

app.Recipes = (function () {
    'use strict'

    // Recipes model
    var recipesModel = (function () {

        var recipeModel = {

            id: 'Id',
            fields: {
                Name: {
                    field: 'Name',
                    defaultValue: ''
                },
                CreatedAt: {
                    field: 'CreatedAt',
                    defaultValue: new Date()
                },
                Elements : {
                    field: 'Elements',
                    defaultValue: '',
                    type: 'relation'
                }
            },
            CreatedAtFormatted: function () {
                return app.helper.formatDate(this.get('CreatedAt'));
            }
        };

        // DataSource by Everlive
        var recipesDataSource = new kendo.data.DataSource({
            type: 'everlive',
            schema: {
                model: recipeModel
            },
            transport: {
                // Nom du Model
                typeName: 'Recipes'
            },
            change: function (e) {

                if (e.items && e.items.length > 0) {
                    $('#no-span').hide();
                } else {
                    $('#no-span').show();
                }
            },
            sort: { field: 'Name', dir: 'asc' }
        });

        return {
            recipes: recipesDataSource
        };

    }());

    // Recipes view model
    var recipesViewModel = (function () {

        //Affichage d'une recette
        var recipeSelected = function (e) {
            app.mobileApp.navigate('views/recipeView.html?uid=' + e.data.uid);
        };

        return {
            recipes: recipesModel.recipes,
            recipeSelected: recipeSelected,
        };

    }());

    return recipesViewModel;

}());

I know there is something wrong somewhere but I can identify exactly what and where...

Also, I don't know if I just explained my problem properly but ask me anything about my code if it's needed.

Thanks for reading !

[Kiril Nikolov]

Hi Djamy,

I am afraid that I was not able to understand your question. Could you please elaborate a bit more or send us a runnable example in a jsBin/jsFiddle, so we can take a deeper look, as your current example is incomplete?

I would also suggest you to check the following article showing an example how to use MVVM binding in Kendo UI Mobile application:

http://docs.telerik.com/kendo-ui/getting-started/mobile/mvvm

Regards,
Kiril Nikolov
Telerik