ember-cli：使用lookup创建的视图中的绑定模板操作

Question

  

Ember：1.10.0

     

Ember数据：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>

但是当我点击弹出窗口时，没有任何反应。

如果有人能告诉我如何将动作绑定到视图的控制器，我会很高兴。

遵循albert的建议，我尝试设置一个组件：

//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();
    }
  }
});

模板是一样的。和以前一样，但在模板/组件文件夹中。

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

现在已触发此操作！这很好，没有显示内容的问题已经使用jquery解决了：

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

我认为这很丑陋，我宁愿单手绑定车把上的{{content}} ......但我无法弄清楚如何做到这一点。

Answer 1

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

现在针对content()未返回值的问题，如果您为此设置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()正文）

使用函数的返回值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'