3

我正在努力学习Ember js，做了一些实验，目前没有太大的成功，但是慢慢的往前走。

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

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

http://jsfiddle.net/drulia/uNNXy/

一种简单，将引用保存在控制器中，另一种使用 ContainerView，但我坚持使用这两种方法。我也尝试了 StateManager，但再次没有运气。

第一个问题是我发现没有其他方法可以在 View 中获取元素的内容，而不是使用this._parentView.get('content');which is not right 因为我不打算使用任何带有 prefix 的东西 _。但我不知道我还能如何实际检查元素是否属于活动选项卡。

第二个主要问题是我不知道如何将内容附加到选项卡。还在为删除标签的能力而苦苦挣扎，因为{{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它的质量非常好，但标签等区域是手写的他们通过路由器工作。

总而言之，目前视图对我来说是一个谜，所以任何有助于动态标签的灯光都将不胜感激。

4

1 回答 1

3

解决方案

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>
于 2013-01-28T23:19:57.533 回答