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 .

希望有帮助。