javascript - HTMLBars 渲染测试

Question

目前我正在构建一个 ember.js 组件，它有两种模式:显示和编辑。当组件处于显示模式时，它会内联呈现模板字符串，这是关联模型的属性。当处于编辑模式时，组件以可编辑的内容显示模板字符串。我必须通过将组件的 2 个实例放入模板 if/else 语句中来使组件在模式切换时重新初始化。我的组件中的以下代码可以实现此目的:

`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.?但看起来我永远无法在生产中捕获断言错误。因此我的问题是:是否可以确定模板字符串是否会正确呈现？或者这种功能超出了 ember 的能力范围？非常感谢指点:)

Answer 1

我认为您可以通过使用组件帮助程序动态显示组件来解决您的问题，看看这个 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这演示了完整的解决方案。