基于新对象属性更新视图？

Question

我的模板中有一个 each 循环，用于遍历页面的磁贴。

在每个图块中，我最初设置了一个按钮，用于在按钮内显示文本“选择我”。

单击按钮时，我只是希望能够将名为“已选择”的属性设置为瓷砖对象，并在单击操作按钮时将其设置为 true，以便按钮上的文本更改为“取消选择我” .

只能选择其中一个图块：在任何给定时间为真。其他的可能是假的。

App = Ember.Application.create();

//Items
App.IndexRoute = Ember.Route.extend({
    model: function() {
        return tiles;
    }
});

App.IndexView = Ember.View.extend({

    actions: {
        productClick: function(id){

            var tile = tiles.findBy('id', id);

            tile.set('selected', true);
        }
    }
});

var tiles = [
    {
        id: '1',
        title: 'tile 1'
    },
    {
        id: '2',
        title: 'tile 2'
    },
    {
        id: '3',
        title: 'tile 3'
    }
];

模板：

  <!--Index page-->
  <script type="text/x-handlebars">
    <div class="tile-wrapper">
      <div class="page-header">
        <h1>Test</h1>
      </div>

      {{outlet}}
    </div>
  </script>

  <!--Tiles-->
  <script type="text/x-handlebars" id="index">
    <div class="row">
      {{#each}}
        {{partial 'tile'}}
      {{/each}}
    </div>

    {{outlet}}
  </script>

  <!--Tile partial-->
  <script type="text/x-handlebars" id="_tile">
    <div class="col-md-3">
      <div class="thumbnail">
        <p>{{title}}</p>


        <button {{action "productClick" id target="view"}}>
          {{#if selected}}
            unselect me
          {{else}}
            select me
          {{/if}}
        </button>


      </div>
    </div>
  </script>

Answer 1

您可以保存所选项目的状态并在您的视图组件中创建一个计算属性，用于比较是否选择了视图内容。

App.IndexController = Em.ArrayController.extend({
  selected: null,
  actions: {
     productClick: function(title){
       this.set('selected', title);
     }
  }

});

App.SelectButtonComponent = Em.Component.extend({

  isSelected: Em.computed(function() {
    return this.get('content') === this.get('selected');
  }).property('content', 'selected'),

  click: function() {

    this.sendAction('action', this.get('content'));

  }
});


  <script type="text/x-handlebars" data-template-name="components/select-button">
          {{#if isSelected}}
            unselect me 
          {{else}}
            select me
          {{/if}}
  </script>

  {{select-button tagName='button' action="productClick"
    content=item  selected=selected}}

http://emberjs.jsbin.com/zicib/1/edit