擴展文本字段與標籤

Question

我想寫的東西是這樣的：

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

和輸出這樣的：<div><label>Your name</label><input type="text" /></div>在文本字段當然是必然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({ 
    ... 
    }) 
}); 

希望這會有所幫助。