我有一个 Handlebars 模板,它在 EmberJS 中用作某个 Route 的模板。 Route 提供了这样一个模型:
{
"Id": 50,
"UserId": 2,
"Name": "sdfq",
"UserFullName": "Bla bla",
"branches": [
{"Id": 2, "Name": "Test branch23", "ProviderId": 50, "AvailabilityId": 1},
{"Id": 3, "Name": "Branch nr 21", "ProviderId": 50, "AvailabilityId": null}
]
}
对于这个模型,我渲染了一个这样的模板:
<table class="table table-bordered ">
<thead>
<tr class="active">
<th>{{language 'Id'}}</th>
<th>{{language 'Name'}}</th>
<th></th>
</tr>
</thead>
{{#each branches}}
<tr>
<td>{{Id}}</td>
<td>{{Name}}</td>
<td>
{{#link-to 'branch.edit' ProviderId Id tagName='button' class='btn btn-primary' }}<span class="glyphicon glyphicon-pencil"></span> Edit{{/link-to}}
{{#if AvailabilityId}}
{{#link-to 'availability.edit' AvailabilityId tagName='button' class='btn btn-primary' }}<span class="glyphicon glyphicon-calendar"></span> Availability <span class="glyphicon glyphicon-pencil"></span>{{/link-to}}
{{else}}
{{#link-to 'availability.add_for_branch' ../Id tagName='button' class='btn btn-success' }}<span class="glyphicon glyphicon-calendar"></span> Availability <span class="glyphicon glyphicon-plus"></span>{{/link-to}}
{{/if}}
</td>
</tr>
{{/each}}
</table>
第一次一切都很好,正确的行显示正确的链接。
现在,当我尝试单击链接 availability.edit
时,出现错误
未捕获的 TypeError:无法读取未定义的属性“AvailabilityId”
如果我追踪到错误,那么它不会导致与我的代码(一个 jQuery 内部函数)相关的任何事情。
Uncaught TypeError: Cannot read property 'AvailabilityId' of undefined ember-1.3.1.js:3936
ChainNodePrototype.unchain ember-1.3.1.js:3936
ChainNodePrototype.remove ember-1.3.1.js:3914
Ember.unwatchPath ember-1.3.1.js:4087
Ember.unwatch ember-1.3.1.js:4156
Ember.removeObserver ember-1.3.1.js:5406
(anonymous function) ember-1.3.1.js:23856
sendEvent ember-1.3.1.js:2351
Ember.Evented.Ember.Mixin.create.trigger ember-1.3.1.js:17629
Ember.CoreView.Ember.Object.extend.trigger ember-1.3.1.js:21769
superWrapper ember-1.3.1.js:1230
ViewCollection.trigger ember-1.3.1.js:21834
Ember.View.Ember.CoreView.extend._notifyWillDestroyElement ember-1.3.1.js:23348
Ember.merge.destroyElement ember-1.3.1.js:24337
Ember.View.Ember.CoreView.extend.destroyElement ember-1.3.1.js:23323
superWrapper ember-1.3.1.js:1230
Ember.CoreView.Ember.Object.extend.destroy ember-1.3.1.js:21803
superWrapper ember-1.3.1.js:1230
Ember.View.Ember.CoreView.extend.destroy ember-1.3.1.js:23657
superWrapper ember-1.3.1.js:1230
(anonymous function) ember-1.3.1.js:24782
sendEvent ember-1.3.1.js:2351
notifyBeforeObservers ember-1.3.1.js:2723
propertyWillChange ember-1.3.1.js:2549
set ember-1.3.1.js:2815
Ember.trySet ember-1.3.1.js:2884
(anonymous function) ember-1.3.1.js:6894
tryable ember-1.3.1.js:2245
Ember.tryFinally ember-1.3.1.js:1412
suspendListener ember-1.3.1.js:2248
Ember._suspendObserver ember-1.3.1.js:5435
Binding._sync ember-1.3.1.js:6893
DeferredActionQueues.flush ember-1.3.1.js:5650
Backburner.end ember-1.3.1.js:5741
Backburner.run ember-1.3.1.js:5780
Ember.run ember-1.3.1.js:6181
Ember.EventDispatcher.Ember.Object.extend._bubbleEvent ember-1.3.1.js:21515
handleViewEvent ember-1.3.1.js:21459
Ember.handleErrors ember-1.3.1.js:899
(anonymous function) ember-1.3.1.js:21450
jQuery.event.dispatch jquery-1.10.2.js:5095
jQuery.event.add.elemData.handle jquery-1.10.2.js:4766
如果我删除 if 语句 {{#if AvailabilityId}}
并一直显示两个链接,它们工作正常。
我尝试使用以下方法修改范围:
{{#link-to 'availability.edit' ../AvailabilityId tagName='button' class='btn btn-primary' }}<span class="glyphicon glyphicon-calendar"></span> Availability <span class="glyphicon glyphicon-pencil"></span>{{/link-to}}
但是好像没有一点作用,连../../都没有作用(这导致大家怀疑是if block ,估计是这个 block 导致了错误)。
欢迎任何提示。
最佳答案
大写属性通常被认为是全局属性,如果您要使用它们,您应该完全限定它们。这很可能是您遇到的问题
{{#each branch in branches}}
<tr>
<td>{{branch.Id}}</td>
<td>{{branch.Name}}</td>
<td>
{{#link-to 'branch.edit' branch.ProviderId branch.Id tagName='button' class='btn btn-primary' }}<span class="glyphicon glyphicon-pencil"></span> Edit{{/link-to}}
{{#if branch.AvailabilityId}}
{{#link-to 'availability.edit' branch.AvailabilityId tagName='button' class='btn btn-primary' }}<span class="glyphicon glyphicon-calendar"></span> Availability <span class="glyphicon glyphicon-pencil"></span>{{/link-to}}
{{else}}
{{#link-to 'availability.add_for_branch' branch.Id tagName='button' class='btn btn-success' }}<span class="glyphicon glyphicon-calendar"></span> Availability <span class="glyphicon glyphicon-plus"></span>{{/link-to}}
{{/if}}
</td>
</tr>
{{/each}}
关于javascript - 每个内部的 Handlebars If 语句都失去了上下文,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21711464/