Question

If you have 2 different pages (call them home and posts) that share ALMOST exactly the same content and functionality, how is the best way to bind one to the other?

In this fiddle I have associated the content of one view to the content of the other by setting it directly in the router like this:

Router: Ember.Router.extend({
 root: Ember.Route.extend({

     //transitions 

      home: Ember.Route.extend({
          route: '/',
          connectOutlets: function(router) {    
               var posts = router.get('postsController.content');                              
               router.get('homeController').set('content', posts);
               router.get('applicationController').connectOutlet('home');
          },
      }),

    //posts and other states
  })
})

But: I don’t really need the home content to update on the fly if the posts content does, but if I did, would it?

What other way is there? Is it possible to use connectControllers() and then WHERE should it be used? Here is my -failed- attempt: another fiddle

home: Ember.Route.extend({
     route: '/',
     connectOutlets: function(router) {                                            
         router.get('homeController').connectControllers('posts');                          
         router.get('applicationController').connectOutlet('home');
      },                    
})

Answer 1

You could use the template helper.

<script type="text/x-handlebars" data-template-name="posts">
  <div class="right"><h2>posts page</h2>
    {{template "posts-details"}}
  </div>            
</script>

<script type="text/x-handlebars" data-template-name="posts-details">
  {{#each post in content}} 
    <article>                                   
      <h3><a {{action "doPost" context="post"}} {{bindAttr id="post.id"}}>{{post.title}}</a></h3>
      <p>{{post.date}}</p>
    </article>
  {{/each}}
</script>

See your updated fiddle