JSFiddle - React, Tailwind, and code Playground

by ud3323

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars">
    {{view App.SpecificIdWrapper}}
    <hr />
    {{#collection App.TodosView contentBinding="App.todosController"}}
        {{content.name}}
    {{/collection}}
    <hr />
    {{view App.SelectedToDoView}}
</script>

<script type="text/x-handlebars" data-template-name="specificId">
    {{#view App.SpecificIdView dataBinding="App.todosController.content" specificId=3}}
        Specific Todo Id: {{content.id}}
        <br />
        Specific Todo Name: {{content.name}}
    {{/view}}
</script>

<script type="text/x-handlebars" data-template-name="selectedToDo">
    {{#view contentBinding="App.todosController.selectedToDo.content"}}
      Selected Todo Id: {{content.id}}
    {{/view}}
</script>

JavaScript

App = Ember.Application.create();

App.SpecificIdWrapper = Ember.View.extend({
    templateName: 'specificId'
});

App.SpecificIdView = Ember.View.extend({
    content: null,
    data: null,
    specificId: null,
    
    _getTodoById: function() {
        var data = this.get('data'); 
        if(data) {
            for(var i=0;i<data.length;i++) {
                if(data[i].get('id') === this.get('specificId')) {
                    this.set('content', data[i]);
                    break;
                }
            }
        }
    },
    
    // This will make sure the content is set when the view is rendered
    didInsertElement: function() {
        this._getTodoById();
    },
    // And this will update the content whenever specificId is changed
    specificIdDidChange: function() {
        this._getTodoById();
    }.observes('specificId')
});

App.SelectedToDoView = Ember.View.extend({
    templateName: 'selectedToDo'
});

App.TodosView = Ember.CollectionView.extend({
    itemViewClass: Ember.View.extend({
        click: function() {
            App.todosController.set('selectedToDo', this);
        }
    })
});

App.todosController = Ember.ArrayController.create({
    content: [
        Ember.Object.create({id: 1, name: "obj1"}),
        Ember.Object.create({id: 2, name: "obj2"}),
        Ember.Object.create({id: 3, name: "obj3"}),
        Ember.Object.create({id: 4, name: "obj4"}),
        Ember.Object.create({id: 5, name: "obj5"}),
        Ember.Object.create({id: 6, name: "obj6"})
    ],
    selectedToDo: null
});