CODEWITHSUNDEEP
ruby-on-rails-3ember.js
user901790
user901790

Reputation: 319

displaying models on different div ember.js

In Ember.js, what is the best way to display a models properties?

Say my model is 'products' so I have a product list, when I click on an item on that list I want the details displayed in another div and not override that view.

How can I do this, below if my code.

  <script type="text/x-handlebars">
    {{ view App.ListReleasesView }}
   </script>

   <script type="text/x-handlebars">
  {{ view App.ReleaseDataView }}
   </script>



App.ListReleasesView = Ember.View.extend({
  templateName:    'app/templates/releases/list',
  releasesBinding: 'App.releasesController',

  showNew: function() {
    this.set('isNewVisible', true);
  },

  hideNew: function() {
    this.set('isNewVisible', false);

  },

  refreshListing: function() {
    App.releasesController.findAll();
  }
});


App.selectedReleaseController = Ember.Object.create({
  release: null
});

list template:

<ul>
  {{#each releases}}
    {{view App.ShowReleaseView releaseBinding="this"}}
  {{/each}}

</ul>

 {{#if isNewVisible}}

        {{view App.NewReleaseView}}

  {{/if}}
<div class="commands">
  <a href="#" {{action "showNew"}}>New Release</a>
  <a href="#" {{action "refreshListing"}}>Refresh Listing</a>
</div>



   App.ShowReleaseView = Ember.View.extend({
  templateName: 'app/templates/releases/show',
  //classNames:   ['show-release'],
  classNameBindings: ['isSelected'],

//  tagName:      'tr',

  doubleClick: function() {
    // this.showEdit();
   // this.showRelease();
    var release = this.get("release");

    App.selectedReleaseController.set("release", release);
  },

  isSelected: function(){
    var selectedItem = App.selectedReleaseController.get("release");
    release = this.get("content");

    if (release === selectedItem) {return true; }

  }.property('App.selectedReleaseController.release')

show template:

{{#if App.selectedReleaseController.release}}

    {{view App.ReleaseDataView}}
 {{else}}

     {{release.name}}

  {{/if}}


App.ReleaseDataView = Ember.View.extend({
  templateName:    'app/templates/releases/releaseData',
  releaseBinding: 'App.selectedReleaseController.release',
 // classNames: ['release'],


});

release template:

  {{#if isSelected}}

  <div class="name">
  {{editable "release.name"}} {{editable "release.description"}}
  </div>

  {{/if}}

Upvotes: 0

Views: 278

Answers (1)

ebryn
ebryn

Reputation: 4407

You'll want to have a simple controller whose job will be managing the selection state.

App.selectedReleaseController = Ember.Object.create({
  content: null
});

Then you'll have another view, for the details, which is bound to that controller.

{{view App.ReleaseDetailsView releaseBinding="App.selectedReleaseController.content"}}

Upvotes: 2

Related Questions