2012-02-06 3 views
4

Я хотел бы написать что-то вроде этого:Продлить TextField с меткой

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

и выход этого: <div><label>Your name</label><input type="text" /></div> где TextField, конечно, связан с person.fullname. Я планирую позже выполнить некоторую проверку в этом представлении.

Как это сделать в Ember?

ответ

4

Я думаю, вам придется создать пользовательское представление, как так:

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

Надеюсь, это поможет.

+0

Ничего себе это потрясающе !! Я выяснил, как это работает, но это так чисто и приятно. Большое спасибо за ваши усилия! –

+0

Попробуйте создать свойство 'value' в' MyApp.FieldView' (как и свойство 'label'), а затем привяжите к нему значение управления данными. Что-то вроде 'valueBinding: 'parentView.value''. – Veebs