Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
  <script src="http://builds.emberjs.com.s3.amazonaws.com/handlebars-1.0.0.js"></script>
  <script src="http://builds.emberjs.com.s3.amazonaws.com/ember-1.0.0-rc.7.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/ember-data.js/0.13.0/ember-data-latest.min.js"</script>
<title>JS Bin</title>
</head>
<body>
      <script type="text/x-handlebars" data-template-name="application">
        aoeu
    {{outlet}}
    </script>
  
    <script type="text/x-handlebars" data-template-name="users/index">
    <h2>Users</h2>
    {{#each user in controller}}
      <li>
      {{#linkTo 'user' user}}
        {{user.name}}
      {{/linkTo}}
      </li>
    {{/each}}
    </script>
  
  <script type="text/x-handlebars" data-template-name="user">
      {{#linkTo 'users.index'}}
        back
      {{/linkTo}}    
      
      <h2>{{name}}</h2>
​
      <h3>Recordings</h3>
      {{render 'recordings' recordings}}
    </script>
  
  <script type="text/x-handlebars" data-template-name="recordings">
  pages: {{#each pages}}
    <li>
    {{#linkTo 'user.page' page_id}}
      {{page_id}}
    {{/linkTo}}   
    </li>
  {{/each}}
    <p>Content that does not update when you select different pages -></p>
      {{#each controller.paginatedContent}}
        <li>{{info}}</li>
      {{/each}}
    </script>
</body>
</html>
 
# Issue with paginating a hasMany relationship.
# 
# Setting the selectedPage property in a route based of the page num 
# param does not seem to work.
# 
# Steps to reproduce:
#  - click on a user
#  - click on a page number other than 1
# 
# Expected:
#   Recording content should change based on page
# 
# Actual:
#   Nothing happens. RecordingsController does not have selectedPage set.
​
App = Ember.Application.create()
​
App.Store = DS.Store.extend
  adapter: DS.FixtureAdapter.create()
​
App.User = DS.Model.extend
  name: DS.attr('string')
  recordings: DS.hasMany('App.Recording')
​
App.Recording = DS.Model.extend
  info: DS.attr('string')
  user: DS.belongsTo('App.User')
​
​
App.User.FIXTURES = [
  {
    id: 1
    name: 'Bill'
    recordings: [1,2,3,4,5]
  }
]
​
App.Recording.FIXTURES = [
  {
    id: 1
    info: 'recording 1'
    user: 1
  }
  {
    id: 2
    info: 'recording 2'
    user: 1
  }
  {
    id: 3
    info: 'recording 3'
    user: 1
  }
  {
    id: 4
    info: 'recording 4'
    user: 1
  }
  {
    id: 5
    info: 'recording 5'
    user: 1
  }
]
​
Ember.PaginationMixin = Ember.Mixin.create(
  pages: (->
    availablePages = @get("availablePages")
    pages = []
    page = undefined
    i = 0
    while i < availablePages
      page = i + 1
      pages.push page_id: page.toString()
      i++
    pages
  ).property("availablePages")
  
  currentPage: (->
    parseInt(@get("selectedPage"), 10) or 1
  ).property("selectedPage")
  
  nextPage: (->
    nextPage = @get("currentPage") + 1
    availablePages = @get("availablePages")
    if nextPage <= availablePages
      Ember.Object.create id: nextPage
    else
      Ember.Object.create id: @get("currentPage")
  ).property("currentPage", "availablePages")
  
  prevPage: (->
    prevPage = @get("currentPage") - 1
    if prevPage > 0
      Ember.Object.create id: prevPage
    else
      Ember.Object.create id: @get("currentPage")
  ).property("currentPage")
  
  availablePages: (->
    Math.ceil (@get("content.length") / @get("itemsPerPage")) or 1
  ).property("content.length")
  
  paginatedContent: (->
    console.log "selectedPage from controller: #{@get("selectedPage")}"
  
    selectedPage = @get("selectedPage") or 1
    upperBound = (selectedPage * @get("itemsPerPage"))
    lowerBound = (selectedPage * @get("itemsPerPage")) - @get("itemsPerPage")
    models = @get("content")
    models.slice lowerBound, upperBound
  ).property("selectedPage", "content.@each")
)
​
App.Router.map ->
  @.resource 'users', path: '/', ->
  @.resource 'user', path: '/:user_id', ->
    @.route 'page', path: '/page/:page_id'
​
App.UsersIndexRoute = Ember.Route.extend
  model: ->
    App.User.find()
    
App.UserPageRoute = Ember.Route.extend
  model: (params) ->
    Ember.Object.create
     id: params.page_id
  setupController: (controller, model) ->
    @.controllerFor('recordings').set('selectedPage', model.get('id'))
    console.log "selectedPage from route: #{@.controllerFor('recordings').get('selectedPage')}"
​
​
App.RecordingsController = Ember.ArrayController.extend Ember.PaginationMixin, 
  itemsPerPage: 2
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers