ember.js - 使用 Ember.js 更改背景颜色

Question

我正在尝试做与链接中相同的事情，使用 Ember.js 更改包的颜色但不更改图像，只是更改颜色。我是网络编程的新手，所以需要帮助:)
http://www.timbuk2.com/tb2/customizer#!/product/10-custom-laptop-messenger-bag/size/4/customize

在这里我找到了，但不能让它工作

<script type="text/x-handlebars">
{{#view Ember.Button target="App.controller" action="blue"}}BLUE{{/view}}  
  {{#view Ember.Button target="App.controller" action="red"}}RED{{/view}} 

  {{#view App.View colorBinding="App.controller.color" attributeBindings="style"}}
    Color is {{App.controller.color}}
  {{/view}}

   <hr>
    <div {{bindAttr style="App.controller.style"}}>And another way...</div>
</script>






App = Ember.Application.create();
/**************************
* Models
**************************/


/**************************
* Views
**************************/
App.View = Ember.View.extend({
    style: function() {
      return "background-color:" + this.get('color');
    }.property('color').cacheable()
});

/**************************
* Controllers
**************************/
App.set('controller', Ember.Object.create({
  color: "transparent",

  red: function() {
    this.set('color', 'red');
  },

  blue: function() {
    this.set('color', 'blue');        
  },

  style: function() {
   return "background-color:" + this.get('color');
  }.property('color').cacheable()
}));
/**************************
* App Logic
**************************/
red (function() {
    console.log('blah'); 
});

Answer 1

我不知道你为什么这样做这么复杂，但这可以通过一种非常简单的方式来实现:

申请模板

<script type="text/x-handlebars">
  <div class="row">
    <button {{action 'changeColor' '428bca'}} class="btn btn-primary">Blue</button>
    <button {{action 'changeColor' 'f0ad4e'}} class="btn btn-warning">Orange</button>
    <button {{action 'changeColor' '5cb85c'}} class="btn btn-success">Green</button>
    <button {{action 'randomColor'}} class="btn btn-default">Random</button>
    <button {{action 'changeColor' 'ffffff'}} class="btn btn-default">Reset</button>
  </div>
  <hr>
  <div class="row box" {{bind-attr style=style}}></div>
</script>

应用 Controller

App.ApplicationController = Ember.ObjectController.extend({
  color: 'ffffff',
  style: function() {
    return 'background-color:%@%@'.fmt('#', this.get('color'));
  }.property('color'),

  actions: {
    changeColor: function(color) {
      this.set('color', color);
    },
    // method added just for fun :)
    randomColor: function() {
      var color = Math.floor(Math.random()*0xFFFFFF).toString(16);
      this.set('color', color);
    }
  }
});

基本上，我们这里做的很简单，就是我们要改变背景颜色的div <div class="row box" {{bind-attr style=style}}></div> .如您所见，它具有 {{bind-attr}}绑定(bind)到 style 的助手div的属性。因此，当单击按钮时， ApplicationController将在 ApplicationController 上设置新颜色 style 的颜色属性计算属性取决于，这将使计算属性在 color 时重新计算。属性更改，通过重新评估绑定(bind)启动并将设置您的 div 的背景颜色样式。

工作 demo .

希望能帮助到你。