Question

如何通过ember.js更改元素类，AKA：

<div class="row" {{bindAttr class="isEnabled:enabled:disabled"}}>

查看：

SearchDropdown.SearchResultV = Ember.View.extend(Ember.Metamorph, {
    isEnabled: false,

    click: function(){
        window.alert(true);
        this.isEnabled = true;
    }
});

点击事件在窗口警报发生时起作用，我只是无法获得绑定。

Answer 1

该类已正确绑定，但isEnabled属性只能通过.set调用this.set('isEnabled', true)进行修改，并且只能使用this.get('isEnabled')进行访问。这是一个支持一流绑定和计算属性的Ember约定。

Answer 2

在您的视图中，您将绑定到className。我的应用程序中有以下视图：

EurekaJ.TabItemView = Ember.View.extend(Ember.TargetActionSupport, {
    content: null,
    tagName: 'li',

    classNameBindings: "isSelected",

    isSelected: function() {
        return this.get('controller').get('selectedTab').get('tabId') == this.get('tab').get('tabId');
    }.property('controller.selectedTab'),

    click: function() {
        this.get('controller').set('selectedTab', this.get('tab'));
        if (this.get('tab').get('tabState')) {
            EurekaJ.router.transitionTo(this.get('tab').get('tabState'));
        }

    },

    template: Ember.Handlebars.compile('<div class="featureTabTop"></div>{{tab.tabName}}')
});

在这里，您已将className绑定到“isSelected”属性返回的任何内容。仅当视图的控制器的选定选项卡ID与此视图的选项卡ID相同时才会出现这种情况。

选择视图时，代码将附加CSS类名“is-selected”。

如果你想在上下文中看到代码，代码在GitHub上：https://github.com/joachimhs/EurekaJ/blob/netty-ember/EurekaJ.View/src/main/webapp/js/app/views.js#L100

Answer 3

很好的答案，但我走了另一条路：

SearchDropdown.SearchResultV = Ember.View.extend(Ember.Metamorph, {
    classNameBindings: ['isSelected'],
    click: function(){

        var content = this.get('content');
        SearchDropdown.SelectedSearchController.set('content', content);
        var loadcontent = this.get('content');
        loadcontent.set("searchRadius", $("select[name=radius]").val());

        SearchDropdown.LoadMap.load(content);

    },
    isSelected: function () {
        var selectedItem = SearchDropdown.SelectedSearchController.get('content'),
          content = this.get('content');
        if (content === selectedItem) {
          return true;
        }
      }.property('SearchDropdown.SelectedSearchController.content')
});

控制器：

SearchDropdown.SelectedSearchController = Ember.Object.create({
  content: null,

});

基本上将所选视图的数据存储在控制器中，

Ember.js在点击时绑定类更改

3 个答案: