Question

我有一个页面，其中数据按行显示。每行都有一个元素：停止或播放。此元素由把手中的以下代码驱动：

  form: FormGroup;
  payLoad = '';

  onSubmit() {
    this.payLoad = JSON.stringify(this.form.value);
  }

当用户单击“停止”或“播放”图标时，我希望逻辑调用后端服务器，更新数据库并将图标更改为停止或播放。我不确定如何在Ember中执行此操作。目前，这是我的{{#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}}方法的样子：

toggle

这有效，但是会重新加载整个页面。

问题

如何修改App.TestController = Ember.ObjectController.extend({ toggle: function () { return "/my/backendserver/"+this.get('id')+"/toggle"; }.property() });方法，使其仅调用服务器（提供toggle作为参数，并在不进行完全页面重新加载的情况下将停止图标切换为播放，反之亦然？）

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，则停止播放，并在{{ 1}}：

span

如何在Ember中更新元素

2 个答案: