0

余烬：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>

但是当我点击弹出关闭器时没有任何反应。

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

按照 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}} ......但我无法弄清楚如何做到这一点。

4

1 回答 1

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'
于 2015-04-16T04:56:23.880 回答