Ember 模板将函数呈现为字符串

Question

我是 ember 的新手，遇到模板问题。

我的路线

import Ember from 'ember';

import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
  model: function(params) {

    var pageNum   = params.page || 1,
        pageRows  = 8;

    return this.store.find('account', {
      page: pageNum,
      rows: pageRows
    });
  },

  setupController: function(controller, model) {
    controller.set('model', model);
    controller.set('greeting', 'Hello World');
  }
});

我的控制器

import Ember from 'ember';

export default Ember.ArrayController.extend({
  contentLength: function() {
    // console.log(this);
    // console.log('length: ' + this.get('content').length);
    // return this.get('content').length;
    return 'Test string';
  },

  actions: {}
});

模板

{{ greeting }}
{{ contentLength }}

{{ greeting }} 正确呈现。但是 {{ contentLength }} 被渲染为字符串函数..

Hello World function () { // console.log(this); // console.log('length: ' + this.get('content').length); // return this.get('content').length; return 'Test string'; }

谁能帮我解决这个问题？

谢谢

Answer 1

您需要在 contentLength 函数的末尾添加 .property() 以便在模板中显示它：

import Ember from 'ember';

export default Ember.ArrayController.extend({
  contentLength: function() {
    // console.log(this);
    // console.log('length: ' + this.get('content').length);
    // return this.get('content').length;
    return 'Test string';
  }.property(),

  actions: {}
});

如果您希望属性在控制器的另一个属性更改时更新，只需将其添加为属性的 "parameter"，就像这样 .property("thepropertytoobserve") 并且 arrayController 的长度属性在模板中已经可用为 {{length}}。

查看 doc 了解有关计算机属性的更多详细信息。

Answer 2

您可以在模板中使用 {{ length }}，因为 ArrayControllers 已经有了属性。

您的 contentLength 函数没有执行您想要的操作的原因是因为它不是计算的属性。您需要使用 Ember.computed(function() { ..}) 或将 .property(...) 附加到 contentLength 函数。

例如：

contentLength: function() {
  return this.get('content.length');
}.property('content.length')

Ember 模板将函数呈现为字符串

Ember template renders function as string

ember.js

handlebars.js