如何佈局灰燼組件與輸入元素

聯合，我就遇到了這個問題，通過更新從EmberJS 1.7〜1.8： https://github.com/emberjs/ember.js/issues/9461#issuecomment-61369680 如何佈局灰燼組件與輸入元素

[更新：例子jsbins可以在上面的鏈接中找到。我必須獲得足夠的聲望才能被允許發佈兩個以上的鏈接。對於給您帶來的不便，我們深表歉意！]

在EmberJS中，似乎無法將組件與tagName'input'和佈局組合在一起。現在我有一個輸入元素和圖形表示坐在旁邊對方喜歡：

<svg ...> 
<input type="radio"...>

的圖像內容是由依賴於單選按鈕狀態的CSS規則（是的，我想樣式我自己的驅動單選按鈕）。

我（propably很天真）組件模板來實現渲染輸出：

<script type="text/x-handlebars" id="components/radio-button"> 
<svg><circle cx="50%" cy="50%" r="8" /></svg> 
{{yield}} 
</script>

[更新：增加的分量碼]

和組件代碼：

App.ApplicationRoute = Ember.Route.extend({ 
    model: function() { 
    return {'radio': 0}; 
}, 
}); 

App.RadioButtonComponent = Ember.Component.extend({ 
    tagName: 'input', 
    attributeBindings: [ 
    'type', 
    'checked', 
    'disabled', 
    'tabindex', 
    'name', 
    'autofocus', 
    'required', 
    'form', 
    'value' 
    ], 
    type: 'radio', 
    checked: false, 
    disabled: false, 
    indeterminate: false, 

    init: function() { 
     this._super(); 
     this.on('change', this, this._updateElementValue); 

     var name = this.get('name'), 
     controller = this.get('radioController'), 
     checked = controller.get('model.%@'.fmt(name)) === this.get('value'); 

     this.set('checked', checked); 
    }, 

    group: "radio_button", 
    classNames: ['radio-button'], 

    _updateElementValue: function() { 
     var name = this.get('name'), 
     controller = this.get('radioController'); 

     controller.set('model.%@'.fmt(name), this.get('value')); 
    } 
});

但用EmberJS 1.8我的組件[更新：增加的代碼]

<script type="text/x-handlebars"> 
    {{radio-button name="radio" radioController=this value=0}} 
</script>

現在獲取呈現，如：

<input type="radio"...><svg ...></input>

我'現在如何保持屬性綁定輸入元素和利用佈局與EmberJS組件不解。

來源

2014-11-02 Ole Roel

如果您將組件代碼提供給演示此問題的組件並使用您的模板，以便人們可以更清楚地瞭解您嘗試執行的操作並診斷問題，這將會很有幫助。一個jsbin會更好 – 2014-11-02 14:10:12

@Andrew黑客是的，你是對的。我試圖添加鏈接到jsbin，但因爲這是我在StackOverflow上的第一個問題，所以我只允許發佈兩個鏈接。 jsbin示例可以在我的問題的第一個鏈接中找到。我非常抱歉鏈接跳躍。我的第一個工作示例在這裏：http://emberjs.jsbin.com/jumozipani/2/edit?html,js,output，我的第二個破碎的例子在這裏：http://emberjs.jsbin.com/jumozipani/2/edit ？HTML，JS，輸出 – 2014-11-02 14:33:58

下面是用於添加布局到一個輸入元件的解決方案：

http://emberjs.jsbin.com/nihacacebe/1/edit?html,js,output

訣竅簡單地是使用「代理」組分：

<script type="text/x-handlebars" id="components/radio-button"> 
    {{radio-button-input name=name radioController=radioController value=value}} 
    <i>{{name}}</i> 
    {{yield}} 
    </script>

該組件允許添加一些佈局到hbs中的輸入元素，並將所有內容轉發到'真實'組件：

App.RadioButtonInputComponent = Ember.Component.extend({ 
    tagName: 'input', 
    type: 'radio', 
    /* Add your code here... */ 
});

代理組件，然後使用像一個真正的分量：

<script type="text/x-handlebars"> 
    {{radio-button name="radio" radioController=this value=0}} 
</script>

該解決方案是由亞普實驗室灰燼-CLI的工作靈感添加在：

https://github.com/yapplabs/ember-radio-button

我仍然有一個硬了解爲什麼在組件中不允許使用佈局輸入元素。

來源

2014-11-08 18:33:40

如何佈局灰燼組件與輸入元素

回答

相關問題