使用标签扩展TextField

Question

我想写这样的东西：

{{ view MyApp.MyTextField label="Your name" valueBinding="person.fullname" }}

并输出以下内容：<div><label>Your name</label><input type="text" /></div>，其中的TextField当然绑定到person.fullname。我计划稍后在这个视图中实现某种类型的验证。

我如何在Ember中做到这一点？

Answer 1

我认为您必须创建一个自定义视图，如下所示：

App.FieldView = Ember.View.extend({
  classNames: 'field clearfix'.w(),

  defaultTemplate: Ember.Handlebars.compile('<div>{{view LabelView}}{{view DataView}}</div>'),

  label: '',

  /**
   * Class representing the label tag
   */
  LabelView: Ember.View.extend({
    tagName: 'label',

    attributeBindings: ['for'],

    'for': '',

    textBinding: 'parentView.label',

    defaultTemplate: Ember.Handlebars.compile('{{text}}')
  }),

  /**
   * Class representing the data capture control.
   */
  DataView: null,

  /**
   * Set the 'for' attribute for the label to that of the data view
   */
  willInsertElement: function() {
    this._super();

    var childViews = this.get('childViews');
    var labelView = childViews[0];
    var dataView = childViews[1];
    labelView.set('for', dataView.$().attr('id'));
  }

});

然后，您可以像这样对textbox使用它

MyApp.MyField= MyApp.FieldView.extend({
  label: 'Label Text',

  DataView : Ember.TextField.extend({
    valueBinding: 'MyApp.pageController.myFieldData'
  })
});

或者像这样的下拉列表

MyApp.MyField= MyApp.FieldView.extend({
  label: 'Label Text',

  DataView : Ember.Select.extend({
    ...
  })
});

希望这能有所帮助。