CODEWITHSUNDEEP
javascriptjquerytemplatesmodelember.js
Sea guy
Sea guy

Reputation: 178

Link tag dosen't work in Emberjs

This is model

App.Store = DS.Store.extend({
   revision: 12,
   adapter: DS.FixtureAdapter
});

App.Markets = DS.Model.extend({
    ids: DS.attr("string"),
    name: DS.attr("string"),
    created: DS.attr("string")
});

App.Markets.FIXTURES = [
    {ids:"312", name:"joy", created:"2012/1/1"},
    {ids:"412", name:"adel", created:"2012/1/2"},
    {ids:"512", name:"john", created:"2012/1/3"}
]; 

App.Sources = DS.Model.extend({
   source_channel: DS.attr("string"),
   handle: DS.attr("handle")
});

App.Sources.FIXTURES = [
    {source_channel:"sc1", handle: "hn1"},
    {source_channel:"sc2", handle: "hn2"}
];

This is route.

var App = Ember.Application.create();

App.Router.map(function() {
    this.resource('markets', {path: '/markets'}, function() {
        this.resource("sources", { path: "/:market_id" });
    });                                                          
});

App.MarketsRoute = Ember.Route.extend({
    model: function () {
        return App.Markets.find();
    }
});

App.SourcesRoute = Ember.Route.extend({
    model: function(){
        return App.Sources.find();
    }
});

This is template

<script type="text/x-handlebars" id="_sources">
  {{#each sources in content}}
    <span>{{sources.handle}}</span>
    <span>{{sources.sources_channel}}</span>
  {{/each}}

</script>

<script type="text/x-handlebars" id="markets">
    {{#each markets in content }}
        {{#linkTo 'sources' markets.ids class="test" }}<span>Source</span>{{/linkTo}}
        <span>{{markets.name}}</span>
        <span>{{markets.created}}</span>

    {{/each}}

    <div class="sources">
        {{partial "sources"}}
    </div>
</script>

When I go to /#/markets, I can see the markets lists. This is correct.

Focus in {{#linkTo 'sources' markets.ids class="test" }}Source{{/linkTo}} of markets template.

In here, markets.ids doesn't work. I'd like to go to /#/markets/markets_id when I click the link.

Upvotes: 1

Views: 88

Answers (2)

Hyder
Hyder

Reputation: 1463

Along with passing the object to the sources route in linkTo,

define serialize method in your App.SourcesRoute.

The template:

{{#linkTo 'sources' markets class="test" }}<span>Source</span>{{/linkTo}}

The Route:

 App.SourcesRoute = Ember.Route.extend({
    model: function(){
        return App.Sources.find();
    },
    serialize: function(model) {
        return { market_id: model.ids };
    }
});

Upvotes: 1

Darshan Sawardekar
Darshan Sawardekar

Reputation: 5075

You want to use linkTo 'sources' markets instead. ie:- pass the model in the each loop to the `linkTo.

Note: Regarding your naming conventions. Ember likes models to be singular, and Routes/Controllers plural or singular depending on whether the route points to one or more models.

Edit: Clarification.

Change the linkTo to this,

{{#linkTo 'sources' markets class="test" }}<span>Source</span>{{/linkTo}}

Upvotes: 1

Related Questions