Ember.js下一張圖片

好的，我是新來的ember.js 只是跟着一些教程到目前爲止好但我的問題是我如何實現圖像的下一個/返回假設圖像的ID是隨機的？我app.js到目前爲止Ember.js下一張圖片

App = Ember.Application.create({}); 



App.Router.map(function() { 
    // put your routes here 
    this.resource('posts'); 
    this.resource('post',{path:':post_id'}) 
}); 




App.PostsRoute = Ember.Route.extend({ 
    model: function() { 
    return posts; 
    } 
}); 


App.PostRoute = Ember.Route.extend({ 
    model: function(params) { 
    return posts.findBy('id', params.post_id); 
    } 

});

來源

2014-03-01 Xtal

它似乎不像你的任何代碼嘗試回答這個問題。帖子和圖片之間有什麼關係？ –

在「職位」路線有「職位」每個包含圖像 – Xtal

你的問題是有點模糊，但對於初學者，你可能需要創建一個Template（持有HTML），一個View（管理用戶交互），和一個Controller（操縱/裝飾模型數據）爲您的每個路線。

確實有不止一種方法可以實現next/prev圖像功能。下面是一個非常基本的方法的例子。您可以輕鬆創建更具視覺吸引力和響應能力的視覺效果，但以下內容應指向正確的方向。下面的代碼沒有經過測試;只是給你一個概念和一個起點。在這一點上你不需要創建視圖（如果不存在，通常會在幕後創建），但是如果你想做任何動畫或其他DOM操作，你可能會需要它們。

模板

<script type="text/x-handlebars" data-template-name="posts"> 
{{#each}} 
    <li>{{#link-to 'post' id}}{{title}}{{/link-to}}</li> 
{{/each}} 
</script> 

<script type="text/x-handlebars" data-template-name="post"> 
<h1>{{title}}</h1> 
<img class="post-image" {{bind-attr src=imageSrc}}/> 
<a href="#" {{action 'prevImage'}}>Prev Image</a> 
<a href="#" {{action 'nextImage'}}>Next Image</a> 
</script>

控制器

App.PostsController = Ember.ArrayController.extend({ 

}); 

/* This assumes the Post model contains an images field which is an array 
* post.images = [{src:'source_path 1'},{src:'source_path 2'},...] 
*/ 
App.PostController = Ember.Controller.extend({ 
    //holds current index into the images list 
    currentImage: 0, 

    //computed property which observes changes to currentImage 
    imageSrc: function() 
    { 
    return this.get('images')[this.get('currentImage')].src; 
    }.property('currentImage'), 

    actions: 
    { 
    nextImage: function() 
    { 
     var next = this.get('currentImage') + 1; 
     if(next >= this.get('images').length) 
     next = 0; 
     this.set('currentImage', next); 
    }, 
    prevImage: function() 
    { 
     var prev = this.get('currentImage') - 1; 
     if(prev <= -1) 
     prev = this.get('images').length-1; 
     this.set('currentImage', prev); 
    } 
    } 
});

查看

App.PostsView = Ember.View.extend({ 

}); 


App.PostView = Ember.View.extend({ 

});

來源

2014-03-01 23:14:10

Ember.js下一張圖片

回答

相關問題