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>です。ご覧のとおり、ヘルパーが div{{bind-attr}}の属性にバインドされています。styleしたがって、ボタンをクリックすると、計算されたプロパティが依存する色プロパティ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 に答える