如何在Ember中更新元素

Question

我有一個頁面，其中的數據以行顯示。 每行都有一個元素：停止或播放。 此元素由車把中的以下代碼驅動：

{{#if isactive}}
  <a {{bindAttr href="toggle"}}><span class="glyphicon glyphicon-play" aria-hidden="true"></span></a>
{{else}}
  <a {{bindAttr href="toggle"}}><span class="glyphicon glyphicon-stop" aria-hidden="true"></span></a>
{{/if}}

當用戶單擊“停止”或“播放”圖標時，我希望邏輯調用后端服務器，更新數據庫並將圖標更改為停止或播放。 我不確定如何在Ember中執行此操作。 目前，這是我的toggle方法的樣子：

App.TestController = Ember.ObjectController.extend({
    toggle: function () {
        return "/my/backendserver/"+this.get('id')+"/toggle";
    }.property()
});

這有效，但是，它會重新加載整個頁面。

題

如何修改toggle方法，使其僅調用服務器（提供id作為參數，並在不進行完整頁面重新加載的情況下將停止圖標切換為播放，反之亦然？）

Answer 1

請注意閱讀以下內容的任何人：該答案是針對Ember 1.0.0rc6編寫的，不應用作編寫現代Ember的示例。

因此，您需要使用操作而不是更改錨的href屬性。

在您的模板中：

{{#if isactive}}
  <button {{action 'toggle'}}><span class="glyphicon glyphicon-play" aria-hidden="true"></span></button>
{{else}}
  <button {{action 'toggle'}}><span class="glyphicon glyphicon-stop" aria-hidden="true"></span></button>
{{/if}}

在您的控制器中：

App.TestController = Ember.ObjectController.extend({
  isactive: false,
  actions: {
    toggle() {
      var _this = this;
      fetch('/my/backendserver/'+this.get('id')+'/toggle').then(function() {
        _this.toggleProperty('isactive');
      });
    }
  }
});

順便說一句，我可能有一些語法細節錯誤，該版本已經使用了6年以上，這在JavaScript時代是永遠的。 而且我沒有對此進行測試。

Answer 2

您可以消除if語句，並在類內使用if語句，如果active為true則顯示播放圖標，如果為false則停止播放圖標，並在span內調用action：

<a><span class="glyphicon {{if active 'glyphicon-play' 'glyphicon-stop'}}" {{action "toggle"}} aria-hidden="true"></span></a>