Emberjs: Use a checkbox to display data

Question

I have a data table with checkbox selection. If an item in the table is checked I want to display that data in another part of the page. Seems like it should be simple but I can't seem to figure it out. I made a js

JS Bin with data table example

Here is the controllers/route

App.IndexController = Ember.Controller.extend({
  productLinks: function(){
        return this.get('content');
    }.property('model', 'isSelected'),

  selectedProduct: function(){
    var selectedProd = this.get('productLinks').filterBy('isSelected', true);
    return selectedProd[0];
  }.property('isSelected'),

  isSelected: null
});

I would like this to evolve to only allowing a single selection, but I'll address that once I can get the data to display.

Answer 1

You need to define the dependency ( property ) correctly. You have the computed property depending on the isSelected property on the controller itself. You need to make it dependent on the isSelected property on each member of productLinks , which you do with the @each syntax.

selectedProduct: function(){
    var selectedProd = this.get('productLinks').filterBy('isSelected', true);
    return selectedProd[0];
}.property('productLinks.@each.isSelected')