Question

我正在努力学习Ember js，做了一些实验，到目前为止还没有太大的成功，但是慢慢向前迈进。

但现在我卡住了，我正在尝试创建一个没有路由器的动态标签。我有这两个小提琴

一个简单，在控制器中保留引用，另一个使用ContainerView，但我坚持两种方法。我也试过了StateManager，但又没有运气了。

在第一个小提琴中的问题是我发现在视图中没有其他方法来获取元素的内容而不是使用this._parentView.get('content');这是不对的，因为我不想使用前缀为_的任何内容。但我不知道我怎么能真正检查元素是否属于活动标签。

第二小提琴的主要问题是我不知道如何将内容附加到选项卡。还要努力去除标签，因为{{action remove this target="App.Tabs"}}总是指向同一个元素。

我一直在阅读http://emberjs.com上的所有指南和API，也正在阅读大量其他教程，其中大多数都没有真正的价值，因为它们已经过时了，特别是对我来说新手，因为它已经很难连接在一起了官方页面中提供的最新作品。

这个todo应用程序示例非常有用https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences这是非常好的质量，但像tab这样的区域是手写的，它们通过路由器工作。

总而言之，目前对于我而言，观点对我来说是一个谜，所以任何使用动态标签帮助的灯都会非常感激。

Answer 1

解决方案

http://jsfiddle.net/drulia/BzRUF/9/

不完美，但是完成工作，您可以导航，创建和删除标签。

为了使它真正可用，应该有一些带有标签的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>

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

1 个答案: