2

我正在尝试做与链接中相同的事情，使用 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'); 
});
4

2 回答 2

2

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

申请模板

<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>

应用控制器

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

工作演示。

希望能帮助到你。

于 2013-09-27T11:01:58.207 回答
0

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

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

于 2013-09-27T11:04:38.250 回答