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>

的ApplicationController

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}}帮助器绑定到div的style属性。因此，当单击按钮时，ApplicationController将在ApplicationController计算属性所依赖的style颜色属性上设置新颜色，这将使计算属性在{{{{{{{ 1}}属性更改，通过重新评估绑定踢，并将设置div的背景颜色样式。

工作demo。

希望它有所帮助。

Answer 2

此代码看起来很旧。试试这个：

HTML：

<script type="text/x-handlebars" data-template-name="index">
   <button {{action "blue"}}>Blue</button>
   <button {{action "red"}}>Red</button> 

    Color is {{color}}

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

使用Javascript： window.App = Ember.Application.create（{}）;

App.Router.map(function() {
    this.route("index", {path: "/"});
});


App.IndexController = Ember.ArrayController.extend({
  color: "transparent",

  actions:{
    red: function() {
      this.set('color', 'red');
      console.log('color is red');
    },

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

  },

  style: function() {
     return "background-color:" + this.get('color');
  }.property('color').cacheable()


});

JSBIN使用此代码：http://jsbin.com/IXokUQa/18/edit

更改背景颜色使用Ember.js

2 个答案:

申请模板

的ApplicationController