mardi 22 mars 2016

Using Ember data with kendo ui

I am new to Ember and I need to use in my application a Kendo UI multiselection.

In Ember in my JS file I define the Kendo UI component specifying the dataSource, this is how it looks like in my app.

export default Ember.Component.extend
...
...
//some hardcoded values to test if it works
var data = [
        { text: "Text 1", value:"1" },
        { text: "Text 2", value:"2" },
        { text: "Text 3", value:"3" },
        { text: "Text 4", value:"4" },
    ];

$("#kendoComponent").kendoMultiSelect({
                dataTextField: "text",
                dataValueField: "value",
                select: onSelect,
                dataSource: data
            });

This is my handlebars:

<div class="demo-section k-content">
        <select id="kendoComponent" multiple="multiple"</select>
</div>

So all of this works fine, the problem I am facing is that I want to use as dataSource some data from the server.

To test this I have set up my mock server. This is realValues data in my mock:

{
    "realValues":[
        {
            "id": 1,
            "text": "Option 1",
        },
        {
            "id": 2,
            "text": "Option 1.1",
        },
        {
            "id": 3,
            "text": "Option 1.2",
        },
}

I am getting the values in my component like this:

var realValues  = this.get('store').findAll('realValues');

In realValues however I am getting a clusterf*** of data from Ember, so the question is:

How do I get only my values id and text as a String so I can then put it as an input to my Kendo UI component?.

Thanks a lot for your help.




Aucun commentaire:

Enregistrer un commentaire