Dynamic 带有Ember js的动态选项卡/列表

我正在努力学习Ember js，做一些实验，到目前为止没有多大的成功，但进展缓慢

但现在我陷入了困境，我试图创建一个没有路由器的动态标签。我有这两把小提琴

一个简单的方法是将引用保存在控制器中，另一个方法是使用ContainerView，但我坚持使用这两种方法。我也试过StateManager，但又一次没有成功

第一个问题是，除了使用

this之外，我找不到其他方法来获取视图中元素的内容

这是不对的，因为我不想使用任何前缀为

\uuu

的东西。但我不知道如何才能真正检查元素是否属于活动选项卡

第二个主要问题是，我不知道如何将内容附加到选项卡上。同时，由于

{{action remove this target=“App.tabs”}

始终指向同一个元素，因此无法删除选项卡

我一直在阅读所有的指南和API，也在阅读大量的其他教程，其中大多数都没有真正的价值，因为它们已经过时了，尤其是对我这个新手来说，因为已经很难将官方页面上提供的最新片段连接在一起

这个todo应用程序的例子非常有用，它的质量非常好，但标签等区域是手写的，它们通过路由器工作

总而言之，目前的视图对我来说是一个谜，因此任何有助于动态选项卡的灯光都将不胜感激。

解决方案

虽然不完美，但完成了这项工作，您可以导航、创建和删除选项卡

为了使它真正可用，应该有一些标签id，这样标签就可以有相同的标题。但是这个想法是存在的，我真的希望有人会发现它有用

下面是js的主要部分，以了解发生了什么

App.IndexController = Ember.ArrayController.extend({
    tabs: ['Tab1','Tab2'],
    activeTab: 'Tab1',
    counter: 2,
    closeTab: function(tab) {
        var i = this.tabs.indexOf(tab);
        this.tabs.removeAt(i);
        if(tab === this.activeTab)
            this.set('activeTab',this.tabs.objectAt(0));
    },
    createTab: function() {
        var newTab = 'Tab' + ++this.counter;
        this.tabs.pushObject(newTab);
        this.set('activeTab',newTab);
    }
});

App.TabInputView = Ember.TextArea.extend({
    placeholder: function() {
        return 'Empty Area of ' + this.tab;
    }.property(),
    isVisible: function(s) {
        var activeTab = this.get('controller.activeTab');
        return Boolean(activeTab === this.tab);
    }.property('controller.activeTab')
});

这里是html的主要部分

    {{#each tab in tabs}}
        {{#view App.TabView tabBinding="tab"}}
    {{tab}} <span class="close" {{action closeTab tab bubbles=false}}>x</span>
        {{/view}}
    {{/each}}
    <button {{action createTab}}>+</button>

{{{#选项卡中的每个选项卡}
{{{#view App.TabView tabBinding=“tab”}
{{tab}}x
{{/view}
{{/每个}}
+