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
  • …
 
<html>
<head>
    <title>Ember test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script>
    <script src="http://builds.emberjs.com/tags/v1.2.0/ember.js"></script>
    <script src="http://builds.emberjs.com/canary/ember-data.js"></script>
    <script>
        window.App = Ember.Application.create();
        App.ApplicationAdapter = DS.FixtureAdapter.extend();
  
        App.Router.map(function () {
            this.resource('questions', {path: '/'});
        });
​
        App.Answer = DS.Model.extend({
            name: DS.attr('string'),
            layoutName: DS.attr('string')
        });
​
        App.Question = DS.Model.extend({
            name: DS.attr('string'),
            answers: DS.hasMany('answer', {async: true})
        });
​
        App.Question.FIXTURES = [
            {
                "id": 1,
                "name": "What is your age?",
                answers: [1, 2, 3]
            }
        ];
​
        App.Answer.FIXTURES = [
            {"id": 1, "name": "name A", "layoutName": "layout-open-ended"},
            {"id": 2, "name": "name B", "layoutName": "layout"},
            {"id": 3, "name": "name C", "layoutName": "layout"}
​
        ];
​
        App.QuestionsRoute = Ember.Route.extend({
            model: function (params) {
                var question =  this.get('store').find('question');
                console.log(question.get('arrangedContent'));
              return question;
            }
        });
​
        App.QuestionsController = Ember.ArrayController.extend({
            answerLayouts: Ember.A({"name": 1, "displayName": 2}),
            selectedAnswerLayout: null
        });
​
        App.QuestionController = Ember.ObjectController.extend({
            actions:{
                addAnswer: function(){
                    var newAnswer = this.get('store').createRecord('answer');
                    newAnswer.set('name', "test")
                    newAnswer.set('layoutName', "test")
                    this.get('answers').pushObject(newAnswer);
                    newAnswer.save();
                }
            }
        });
​
        App.AnswerController = Ember.ObjectController.extend({
​
            openEnded: false,
​
            initialize: function(){
                this.set('openEnded', (this.get('layoutName').indexOf('-open-ended') != -1));
            }.on('init'),
​
​
            makeAnswerOpenEnded: function () {
                var answerLayoutName = this.get('layoutName');
                if (!(this.get('openEnded'))) {
                    answerLayoutName = answerLayoutName.replace(/(-open-ended)$/, '');
​
                } else {
                    answerLayoutName = answerLayoutName + "-open-ended";
​
                }
​
                this.set('layoutName', answerLayoutName);
            }.observes('openEnded'),
​
            actions:{
                delete:function(){
                    var record = this.get('model');
                    this.get('parentController.answers').removeObject(record);
                }
            }
        });
    </script>
</head>
<body>
<script type="text/x-handlebars" data-template-name="questions">
    {{#each itemController="question"}}
        {{name}}
​
        <table cellspacing="10">
                <tr>
                    <th>name </th>
                    <th>layout</th>
                    <th>open ended?</th>
                    <th></th>
                    <th><button {{action 'addAnswer'}}>Add</button></th>
                </tr>
            {{#each answers itemController="answer"}}
            <tr>
                <td>{{name}}</td>
                <td>{{layoutName}}</td>
                <td>{{openEnded}}</td>
                <td>{{input type="checkbox" checked=openEnded}}</td>
                <td><button {{action 'delete'}}>Delete</button></td>
            </tr>
            {{/each}}
        </table>
​
    {{/each}}
​
</script>
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers