Question

我的模板中有一个循环，遍历切片到页面。

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

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

在任何给定时间，只能选择其中一个图块：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

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

1 个答案: