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'));
  }

});

然后您可以像文本框一样使用它

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

希望这有帮助。

使用标签扩展TextField

1 个答案: