ember-cli：从使用查找创建的视图绑定模板操作

Question

Ember : 1.10.0

Ember Data : 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();
    }
  }
});

模板相同。和以前一样，但在 templates/components 文件夹中。

结果比以前更糟。我让弹出窗口将函数显示为文本而不是内容文本...

动作现已触发！太好了，内容不显示的问题已经用 jquery:

解决了

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

我认为这很丑陋，我更希望有一种方法可以将 {{content}} 绑定到车把中...但我不知道该怎么做。

Answer 1

@albertjan 是对的。这必须是一个组件。这是正确的方向。

现在 content() 不是 returning 值的问题可以解决，如果你像这样 computed property

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() 主体）

要使用函数的 return 值 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'

ember-cli：从使用查找创建的视图绑定模板操作

ember-cli: bind template action from view created using lookup

ember.js

ember-cli

ember.js-view