2013-07-19 54 views
2

定義模板我想看到的內容。當我點擊導航使用Ember.Js

<script type="text/x-handlebars" id="application"> 
    {{outlet}} 
</script> 

<script type="text/x-handlebars" id="markets/sources"> 
    {{#each model }} 
     <span>{{source_channel}}</span> 
     <span>{{handle}}</span> 
    {{/each}} 

</script> 

<script type="text/x-handlebars" id="markets"> 
    <div class="leftside"> 
    {{#each model }} 
     <span>{{name}}</span> 
     <span>{{created}}</span> 
     {{#linkTo 'markets.sources' this class="link" }}<span>go to</span>{{/linkTo}} 
    {{/each}} 
    </div> 
    <div class="rightside"> 
     {{outlet}} 
    </div> 
</script> 

定義路線

var App = Ember.Application.create(); 

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

App.IndexRoute = Ember.Route.extend({ 
    redirect: function() { 
     this.transitionTo('markets'); 
    } 
}); 

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

App.MarketsSourcesRoute = Ember.Route.extend({ 
    model: function(){ 
     return App.Sources.find(); 
    }, 
    serialize: function(model) { 
     return { markets_id: model.id }; 
    } 
}); 

定義模式

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

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

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

App.Sources.FIXTURES = [ 
    {id:1, markets_id:"1310", source_channel:"sc1", handle: "hn1"}, 
    {id:2, markets_id:"1310", source_channel:"sc2", handle: "hn2"}, 
    {id:3, markets_id:"1310", source_channel:"sc3", handle: "hn3"}, 
    {id:4, markets_id:"1512", source_channel:"sc4", handle: "hn4"}, 
    {id:5, markets_id:"1512", source_channel:"sc5", handle: "hn5"} 
]; 

App.Markets.FIXTURES = [ 
    {id:"1310", name:"test1", created:"2012-2-3" }, 
    {id:"1320", name:"test2", created:"2012-2-13" }, 
    {id:"1512", name:"test3", created:"2012-2-23" } 
]; 

定義控制器

App.MarketsController = Ember.ObjectController.extend({}); 
App.MarketsSourcesController = Ember.ObjectController.extend({}); 

我喜歡用EmberJs

在這裏看到的子內容當我點擊{{#linkTo}},我不能看到我want._ 結果,它顯示在右邊黑內容當我點擊左側的一個錨標記
我認爲「來源」模型沒有與「市場/ soruces」模板相結合。
我希望看到源模型的正確結果,當我點擊左側的錨標籤時。

如果有可能,我想看到jsbin或的jsfiddle

回答

0

的踢和笑聲信息的隨機位的結果。

細節1,路線與他們的父資源共享相同的資源。

細節2,當你設置你要麼與路線相關的模型,或者模型的ID發送linkTo。

細節3,因爲你有一個市場,你需要設置源之間的多對多關係的灰燼數據的一些附加查詢助手(這樣你就可以通過markets_id而不是源的ID查詢)

這一切都這樣說,這裏有一個jsbin與它一起工作(雖然不花哨,我不感到自豪自己對我的CSS技巧)

jsbin

相關問題