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>
<meta name="description" content="Ember template" />
<meta charset=utf-8 />
<title>JS Bin</title>
  <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
  <script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.1.2/ember.js"></script>
</head>
<body>
  <script type="text/x-handlebars" data-template-name="my_template">
    {{view fieldSelects}}
  </script>
​
  <div id="main"></div>
</body>
</html>
 
App = Ember.Application.create();
​
var TemplatedViewController = Ember.Object.extend({
    templateFunction: null,
    viewArgs: null,
    viewBaseClass: Ember.View,
    view: function () {
        var controller = this;
        var viewArgs = this.get('viewArgs') || {};
        var args = {
            template: controller.get('templateFunction'),
            controller: controller
        };
        args = $.extend(viewArgs, args);
        return this.get('viewBaseClass').extend(args);
    }.property('templateFunction', 'viewArgs'),
    appendView: function (selector) {
        this.get('view').create().appendTo(selector);
    },
    appendViewToBody: function () {
        this.get('view').create().append();
    }
});
​
var DATA = {};
DATA.model_data = {
  "Book": {
    "fields": [
      "id",
      "title",
      "publication_year",
      "authors"
    ],
    "meta": {
      "id": {},
      "title": {},
      "publication_year": {},
      "authors": {
        "model": "Author"
      }
    }
  },
  "Author": {
    "fields": [
      "id",
      "first_name",
      "last_name",
      "books"
    ],
    "meta": {
      "id": {},
      "first_name": {},
      "last_name": {},
      "books": {
        "model": "Book"
      }
    }
  }
};
​
var Controller = TemplatedViewController.extend({
    view: function () {
        var controller = this;
        return this.get('viewBaseClass').extend({
            controller: controller,
            templateName: 'my_template'
        });
    }.property(),
    selectedFields: null,
    fieldSelects: function () {
        var filter = this;
        return Ember.ContainerView.extend({
            controller: this,
            childViews: function () {
                var that = this;
                var selectedFields = filter.get('selectedFields');
​
                var ret = [];
                var model = 'Book';
                selectedFields.forEach(function (item, index, enumerable) {
                    var selection = item;
                    if (model) {
                        var select = that.makeSelect(model, that.getPositionIndex(), selection, true).create();
                        ret.pushObject(select);
                        model = DATA.model_data[model].meta[selection].model;
                    }
                });
​
                return ret;
            }.property(),
            nextPositionIndex: 0,
            incrementPositionIndex: function () {
                this.set('nextPositionIndex', this.get('nextPositionIndex') + 1);
            },
            getPositionIndex: function () {
                var index = this.get('nextPositionIndex');
                this.incrementPositionIndex();
                return index;
            },
            setNextPositionIndex: function (newValue) {
                this.set('nextPositionIndex', newValue+1);
            },
            makeSelect: function (modelName, positionIndex, selection, isInitializing) {
                var view = this;
                return Ember.Select.extend({
                    positionIndex: positionIndex,
                    controller: filter,
                    content: DATA.model_data[modelName].fields,
                    prompt: '---------',
                    selection: selection || null,
                    selectionChanged: function () {
                        var field = this.get('selection');
​
                        // Remove child views after this one
                        var lastIndex = view.get('length') - 1;
                        if (lastIndex > this.get('positionIndex')) {
                            view.removeAt(this.get('positionIndex')+1, lastIndex-this.get('positionIndex'));
                            view.setNextPositionIndex(this.get('positionIndex'));
                        }
​
                        if (! isInitializing && DATA.model_data[modelName].meta[field].model) {
                            var relatedModel = DATA.model_data[modelName].meta[field].model;
                            view.pushObject(view.makeSelect(relatedModel, view.getPositionIndex()).create());
                        }
​
                        // Reset ``isInitializing`` after the first run
                        if (isInitializing) {
                            isInitializing = false;
                        }
​
                        var selectedFields = [];
                        view.get('childViews').forEach(function (item, index, enumerable) {
                            var childView = item;
                            var selection = childView.get('selection');
                            selectedFields.pushObject(selection);
                        });
                        filter.set('selectedFields', selectedFields);
                    }.observes('selection')
                });
            }
        });
    }.property()
});
var controller = Controller.create({
    selectedFields: ['authors', 'first_name']
});
​
$(function () {
    controller.appendView('#main');
});
​
Output

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

Dismiss x
public
Bin info
hekevintranpro
0viewers