ember-cli：使用查找創建的視圖綁定模板操作

Question

灰燼：1.10.0

灰燼數據：1.0.0-beta.16

的jQuery：1.11.2

我使用this.container.lookup以便在控制器中動態創建視圖，如下所示：

var popup = this.container.lookup('view:map-popup', {singleton: false});
var ctrl = this.container.lookup('controller:map-popup', {singleton: false});
popup.set('controller', ctrl);
popup.createElement();

視圖的定義如下：

export default Ember.View.extend({
  templateName: "mapPopup",
  classNames: ["map-popup"]
});

視圖模板：

<a class="popup-closer" {{action 'closePopup'}}></a>
<div class="popup-content">{{content}}</div>

和視圖的控制器：

export default Ember.ObjectController.extend({

  hide: function() {
    console.log("i'm hidden");
  },

  actions: {
    closePopup: function() {
      this.hide();
    }
  }
});

我的控制器已將視圖正確插入DOM中：

<div class="ember-view map-popup" id="ember643">
  <a data-ember-action="645" class="popup-closer"></a>
  <div class="popup-content">571187.3674937992,5721182.413928764</div>
</div>

但是，當我單擊彈出窗口時，什么也沒有發生。

如果有人可以向我展示如何將操作綁定到視圖的控制器，我將感到非常高興。

遵循阿爾伯特的建議，我嘗試設置一個組件：

//app/components/map-popup.js
export default Ember.Component.extend({
  classNames: ['map-popup'],
  layoutName: 'components/map-popup',

  content: function() {
    return "some content";
  },

  hide: function() {
    console.log('hidden');
  },

  actions: {
    closePopup: function() {
      this.hide();
    }
  }
});

模板是相同的。 和以前一樣，但是在template / components文件夾中。

結果比以前更糟。 我得到了將功能顯示為文本而不是內容文本的彈出窗口...

現在已觸發該動作！ 太好了，使用jquery可以很好地解決內容不顯示的問題：

  setUp: function() {
    this.$('.popup-content').html(this.content());
  }.on('didInsertElement'),

我認為這很丑陋，我寧願有一種將{{content}}綁定到車把的方法……但是我不知道該怎么做。

Answer 1

@albertjan是正確的。 這必須是一個組成部分。 那是正確的方向。

現在，對於這樣的問題，如果您像這樣為它創建一個計算屬性 ，就可以解決content()不返回值的問題

export default Ember.Component.extend({
  classNames: ['map-popup'],
  layoutName: 'components/map-popup',

  /*Notice the .property('') */
  content: function() {
    return "some content";
  }.property(''),

  hide: function() {
    console.log('hidden');
  },

  actions: {
    closePopup: function() {
      this.hide();
    }
  }
});

為什么這樣做有效，當您在模板中使用簡單函數時，它只不過是具有一些字符串值的屬性（它是function()主體）

要使用函數的返回值Ember，請使用計算屬性的概念。

計算屬性也接受自變量，對於合並兩個或多個這樣的屬性的結果很有用。 任何相關屬性更改時，其輸出都會更新。

可以在Emberjs.com上找到示例

var Person = Ember.Object.extend({
  // these will be supplied by `create`
  firstName: null,
  lastName: null,

  fullName: function() {
    var firstName = this.get('firstName');
    var lastName = this.get('lastName');

   return firstName + ' ' + lastName;
  }.property('firstName', 'lastName')
});

var tom = Person.create({
  firstName: 'Tom',
  lastName: 'Dale'
});

tom.get('fullName') // 'Tom Dale'