HTMLBars渲染測試

目前我正在構建一個ember.js組件，它有2種模式，顯示和編輯。當組件處於顯示模式時，它將內聯呈現模板字符串，該字符串是關聯模型的屬性。處於編輯模式時，組件在可編輯內容中顯示模板字符串。我必須在模式切換時重新初始化組件，方法是將2個組件實例放入模板if/else語句中。在我的組件下面的代碼啓用此：HTMLBars渲染測試

`import layoutDefault from '../templates/components/positionable-element-default'`

.....

layout:Em.computed(-> 
    if @.get('layoutComponent.displayMode') 
     Ember.HTMLBars.compile(@.get('regionModel.textContent')) 
    else 
     layoutDefault 
)

我解決渲染未能剝離出模板字符串的{和}字符，然後重新編譯後的想法提醒用戶錯誤。

我試圖把編譯函數放在try catch中，但沒有任何被捕獲，大概是因爲它不是編譯問題，而是渲染。

經過一番研究，我發現Why Ember.onerror() not capturing the Assertion Failed error.?，但它看起來像我將永遠無法捕捉生產中的斷言錯誤。因此我的問題是：是否有可能確定模板字符串是否會正確呈現？或者這種功能是否超出了餘燼功能的範圍？指針讚賞:)

來源

2016-05-06 J. Barca

你真的*不應該*爲一個組件使用不同的模板！使用兩個組件並將常用功能放入混音中！或者在您的模板中使用'{{if}}'塊，可以調用子模板。 – Lux

我想你也許可以通過使用組件的輔助動態顯示組件解決您的問題，看看這個post進行了詳細解釋它如何工作等

這裏是我建議你嘗試使用組件幫助解決你的問題：現在

// components/toggling-component.js 
export default Ember.Component.extend({ 
    mode: 'display', 
    modeComponent: Ember.computed('mode', function(){ 
    return this.get('mode') + '-mode' 
    }), 
    actions: { 
    setMode(mode){ 
     this.set('mode', mode) 
    } 
    } 
}) 

// templates/components/toggling-component.hbs 
Current Mode: {{mode}}<br/> 
<button {{action 'setMode' 'display'}}>Toggle Display</button>| 
<button {{action 'setMode' 'edit'}}>Toggle Edit</button> 
<hr/> 
{{component modeComponent text=model.textContent}}

，通過切換該模式屬性，您可以加載自己喜歡的任意模式，其中一個模式將對應的組件如下面兩個：

// templates/components/display-mode.hbs 
Display Mode Component: <br/> 
{{text}} 

// templates/components/edit-mode.hbs 
Edit Mode Component: <br/> 
{{textarea value=text cols="80" rows="6"}}

以下是演示完整解決方案的twiddle。

來源

2016-05-07 11:46:44 TameBadger

這是一個有用的替代方法，幫助我與另一個問題，謝謝:)但是，它沒有解決我的查詢的要點，如何捕捉失敗的內聯模板編譯 –

另外，因爲每個組件需要自己的模板字符串基於一個關聯的模型，我不認爲我可以使用modeComponent（因爲具有該名稱的模板必須已經定義） –

HTMLBars渲染測試

回答

相關問題