JSFiddle - React, Tailwind, and code Playground

by alexchetv

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.3.js"></script>
<comment>*** общий шаблон ***</comment>
<script type="text/x-handlebars">
    <comment>** здесь мы вставляем вид App.ListView для которого уже задан шаблон ListTpl</comment>
    {{view App.ListView}}
    <comment>** а здесь вставляем вид App.SelectedItemView и далее описываем его шаблон</comment>
    {{#view App.SelectedItemView 
    class="selected-window"}}
        {{item}}
    {{/view}}
</script>

<comment>*** шаблон ListTpl***</comment>
<script type="text/x-handlebars" data-template-name="ListTpl">
   {{#each App.ListController.items}}
    <comment>*** передаем currentItem в дочерний шаблон/вид ***</comment>    
       {{view App.ListItemView currentItemBinding="this"}}
   {{/each}}
</script>

<comment>*** шаблон ListItemTpl***</comment>
<script type="text/x-handlebars" data-template-name="ListItemTpl">
    <comment>*** currentItem из родительского шаблона ***</comment>
    {{currentItem}}
</script>

CSS

div.selected-window{
    margin:15px;
    border:1px solid gray;
}

div.is-selected{
    background-color:#333;
    color:white;
}

comment {
    display:none;
}

JavaScript

App = Ember.Application.create();

// ****************** вид ListView ********************************************************
App.ListView = Ember.View.extend({
    templateName: "ListTpl",
});

App.ListItemView = Ember.View.extend({
    templateName: "ListItemTpl",
    //listitemControllerBinding: "App.ListController",
    classNameBindings: "isSelected",
    click: function(evt) {
        App.ListController.set('selectedItem', this.currentItem);
    },
    isSelected: function() {
        return App.ListController.selectedItem === this.currentItem;
    }.property("App.ListController.selectedItem")
});

App.SelectedItemView = Ember.View.extend({
    itemBinding: "App.ListController.selectedItem"
});

App.ListController= Ember.Object.create({
    items: ["item 33", "item 2", "item 3"],
    selectedItem: null
});