CODEWITHSUNDEEP
javascriptember.js
Ragnar
Ragnar

Reputation: 4592

Ember.js "Each" trouble

In Ember.js I have this model:

App.Product = DS.Model.extend({
    name: DS.attr("string"),
    ean: DS.attr("number"),
    price: DS.attr("number"),
    units: DS.attr("number"),
    product_states: DS.hasMany('App.ProductState')
});

App.ProductState = DS.Model.extend({
    price: DS.attr("number"),
    units: DS.attr("number"),
    product_id: DS.belongsTo('App.Product'),
    user_id: DS.belongsTo('App.User'),
    created: DS.attr("date")
});

And I have this each:

        {{#if view.product}}
            {{#each item in App.ProductState.find({ product_id: view.product.id})}}
                <tr>
                    <td>{{view.product.name}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.units}}</td>
                    <td>{{item.created}}</td>
                </tr>
            {{/each}}
        {{/if}}

Which gives me this error (Chrome):

Uncaught Error: Parse error on line 6:
...in App.ProductState.find({ product_id: v
-----------------------^
Expecting 'ID', got 'INVALID'

I get this error when I am loading the page. In the time of loading the view.product is set to NULL. The each is inside of jQuery UI dialogue and its content is set dynamically as a result of button through view.set("product",product);.

Setting the product object works because when I want to just print out a product variable in the dialogue window it works just fine but it crashes when I am using the each.

In my opinion Ember ignores the if condition and tries to run through the each cycle which gives the error. Other option is that I am just using the find method wrong (btw. Ember guide tells you how to set model relationships but as far as I know does not mention what effect they have and how to use them properly).

Is it possible to work around the problem? Maybe something like running the each in javascript function instead of template or something?

Upvotes: 0

Views: 294

Answers (1)

raytiley
raytiley

Reputation: 684

You can not put javascript into handlebars templates (the views). If you need to to use straight up javascript code to do some special presentation processing then you should be using handlebars helpers which are covered here: http://emberjs.com/guides/templates/writing-helpers/

In your specific example since product_states is a property of Product you can just access the product_states property directly and ember / ember data will load the data when you request it and then update the when the data comes back from the server.

{{#if view.product}}
    {{#each item product.product_states)}}
        <tr>
            <td>{{view.product.name}}</td>
            <td>{{item.price}}</td>
            <td>{{item.units}}</td>
            <td>{{item.created}}</td>
        </tr>
    {{/each}}
{{/if}}

Note the convention in ember is to have properties camelCased. So your Product model should have a productStates property, and your ProdcutState model should have a userId property`. Not sure if this will mess up materialization of your json fromt he server or not.

Hope this helps.

Upvotes: 2

Related Questions