ember.js - Handlebars 调试缺少模型的 {{property}}

Question

如果模板未获取所有 {{properties}}(用于调试)，我希望在控制台中看到某种输出

例如如果是模板

<script type="text/x-handlebars" id="demo">
    <h1>{{name}}</h1>
    <p>{{desc}}</p>
</script>

通过模型调用

{
  name:"Max",
}

应该有类似 console.warn

的输出

Template "demo" could not find property "desc"

每次调用像 {{property}} 这样的 Handlebars 表达式时，是否有任何辅助函数、回调函数等被调用？

Answer 1

你可以用 JavaScript 做任何你喜欢做的事情。但一定要小心。 :)

有很多方法可以实现你的目标，具体取决于你真正需要什么以及你可以花多少时间来破解 ember/handlebars/ember-data 包。

第一个也是最简单的变体是重写 SimpleHandlebarsView/_HandlebarsBoundView 的 render 方法，该方法显示简单的绑定(bind)值(还有一些其他 View :对于 @each、与等)。这是一个简单的序列:重写方法，调用旧方法，检查获取渲染值的结果，如果结果===未定义，则console.warn。您无法在该方法内获取模板名称，但可以获取渲染值的父 View 。因此，我建议打开 LOG_VIEW_LOOKUPS 以轻松将 View 与模板匹配。

控制台日志示例:

Rendering application with default view <(subclass of Ember.View):ember226> Object {fullName: "view:application"} 
Rendering index with default view <(subclass of Ember.View):ember251> Object {fullName: "view:index"}
Rendering <(subclass of Ember.View):ember251> , property is undefined: model.undefined

JSBin with example .

另一种方法是重写 ember-handlebars-ext 包中的 handlebarsGet 方法:https://github.com/emberjs/ember.js/blob/v1.7.0/packages/ember-handlebars/lib/ext.js#L75 .

第三，如果您需要捕获对 Ember.Objects 未定义属性的访问，您可以覆盖 unknownProperty这些对象的方法。

如果需要快速查看渲染数据，可以使用{{log model}} Handlebar 模板中的方法。

当然，您可以更深入地修补和重写 Ember 的核心。但我建议不要过多依赖库的内部结构。祝你好运!