Блог

Главная - Вопросы по программированию - Как переключить один элемент в списке ember в Ember

Как переключить один элемент в списке ember в Ember

#ember.js #ember-cli

#ember.js #ember-cli

Вопрос:

У меня есть компонент следующим образом

 {{#md-collection content=model as |item|}}
  <div class='collection-item'>
    <img src="{{item.url}}" class="asset-thumbnail" />
    <div class="asset-url">
      {{item.url}}
    </div>
    <div class="secondary-content">
      {{#copy-button
         clipboardText=item.url
         class="btn"
         success="successfulCopy"
      }}
        {{fa-icon "chain" title="Copy to Clipboard"}} {{unless copied "Copy Link" "Copied"}}
      {{/copy-button}}
      {{confirmation-link
        title="Delete"
        action=(route-action "deleteAsset" item)
        icon="trash"
        message="Are you sure you want to delete this asset?"
        confirmButtonText="Yes, Delete Asset"
        confirmButtonColor="#FF6666"
        classNames="btn delete"}}
    </div>
  </div>
{{/md-collection}}

и у него есть контроллер:

 import Ember from 'ember';

export default Ember.Component.extend({
  copied:false,
  actions:{
    deleteAsset(asset){
      this.attrs.deleteAsset(asset);
    },
    successfulCopy(btn){
      console.log(this.$(btn));
      this.$(btn).toggleProperty('copied', true);
      Ember.run.later(()=>{
        this.$(btn).toggleProperty('copied', false);
      },500);
    }
  }
});

когда я нажимаю кнопку с текстом Copy Link , компонент затем переключает скопированное свойство, как и должно, однако он переключает свойство для всех элементов в списке, изменяя весь их текст. В действии successfulCopy у меня есть ссылка на HTML-код кнопки, на которую нажали. Как мне переключить скопированное свойство только для этого одного компонента, чтобы переключать только текст этой кнопки?

Комментарии:

1. Вам нужно иметь один атрибут для каждой вызываемой кнопки copied . Прямо сейчас у вас есть один атрибут, общий для всех кнопок, затем всякий раз, когда этот атрибут изменяется, он вызывает цепную реакцию во всех элементах, которые его используют…

2. Вы опубликовали код компонента, это copy-button код компонента ?. покажите нам код, откуда вы вызываете successfulCopy функцию, что это за аргумент, щелкнул copy-button ли он в этом контексте.

Ответ №1:

попробуйте это:

 successfulCopy(btn){
  this.set('item.copied', true)
}

{{fa-icon "chain" title="Copy to Clipboard"}} {{unless item.copied "Copy Link" "Copied"}}

Ответ №2:

основной компонент,

   {{#copy-button
     clipboardText=item.url
     class="btn"
     success="successfulCopy" as |copied|
  }}
    {{fa-icon "chain" title="Copy to Clipboard"}} {{unless copied "Copy Link" "Copied"}}
  {{/copy-button}}

copy-button.hbs
copied свойство доступно в copy-button компоненте, поэтому для доступа к нему main-component оно должно его выдавать.

 {{yield copied}}

copy-button.js
successfulCopy функция переключит его собственное свойство copied . таким образом, вам не нужно передавать аргумент, и вам не требуется материал jquery, поскольку вы уже написали copied свойство на основе логики. просто переключение copied сделает все остальное.

 import Ember from 'ember';

export default Ember.Component.extend({
  init(){
     this._super(...arguments);
     this.set('copied',false);
   }
  actions:{
    deleteAsset(asset){
      this.get('deleteAsset')(asset);
    },
    successfulCopy(){
      this.toggleProperty('copied');
    }
  }
});
Метки: