我有两个脚本,每个脚本都有自己的Handlebars模板。一个人工作得非常好,另一个人继续给予TypeError: collapseTemplate is not a function
。
我在这里缺少什么。编译第一个模板和第二个模板之间没有任何变化,我在两个脚本中找不到任何区别。
有效的
$('t-button').each(function() {
var e = $(this);
var btnTitle, btnId, btnSecondary, hasId, isStandard, isDis, isRead, btnPos, btnInvert, btnCustom, isIcon, iconName, icon, btnIcon, btnSmall, isSpinner, btnSpinner, btnGrouped;
if(typeof e.html() !== 'undefined') {
btnTitle = e.html();
}
if(e.hasAttr('id')) {
btnId = e.attr('id');
if(e.attr('id').length > 0) {
hasId = true;
}
}
if(e.hasAttr('secondary')) {
btnSecondary = 'btn-secondary '
}
if(e.hasAttr('small')) {
btnSmall = 'btn-small ';
}
if(e.attr('disabled')) {
isDis = true;
};
if(e.attr('readonly')) {
isRead = true;
};
if(e.hasAttr('right')) {
btnPos = 'btn-right ';
}
if(e.hasAttr('invert')) {
btnInvert = "btn-invert ";
}
if(e.hasAttr('custom')) {
t = e.attr('custom');
btnCustom = t;
}
if(e.hasAttr('icon')) {
isIcon = true;
t = e.attr('icon');
btnIcon = 'btn-icon '
// need to build more icon options in here
// this is just for example
if(t == 'undo') {
icon = 'icon-bg-undo';
} else if (t == 'edit') {
icon = 'icon-bg-pencil';
}
} else if (e.hasAttr('spinner')) {
isSpinner = true;
btnSpinner = 'btn-save-widget '
} else {
isStandard = true;
}
if(e.hasAttr('grouped')) {
btnGrouped = 'btn-grouped ';
}
var data = {
buttonId: btnId, // this is the actual id of the button
buttonSecondary: btnSecondary, // this adds the secondary button class to the button
thisHasId: hasId, // this returns true if button has an ID
thisIsStandard: isStandard, // this returns true if this is a standard button
buttonSmall: btnSmall, // this adds the small button clas to the button
buttonPosition : btnPos, // this adds the position right button class to the button
buttonInvert : btnInvert, // this adds the invert button class to the button
buttonCustom : btnCustom, // this adds custom classes to the button
thisIsDis : isDis, // this returns true if the button should be disabled
thisIsRead : isRead, // this returns true if the button should be readonly
buttonDisabled : 'disabled', // this adds the disabled attribute to the button
buttonReadonly : 'readonly', // this adds the readonly attribute to the button
buttonName : btnTitle, // this applies the button title to the button
thisIsIcon: isIcon, // this returns true if the button has an icon
iconName: icon, // this returns the icon name
buttonIcon: btnIcon, // this adds the icon button class to the button
thisIsSpinner: isSpinner, // this returns true if the button has a spinner
buttonSpinner: btnSpinner, // this adds the spinner button class to the button
buttonGrouped: btnGrouped // this adds the grouped button class to the button
};
var btnTemplate = Handlebars.templates['buttons-template-compiled'];
var result = btnTemplate(data);
e.replaceWith(result);
});
提供错误的
$('t-collapse').each(function() {
var e = $(this);
var colClass,
colId,
colTitle,
colContent,
checked;
if(e.hasAttr('custom-class')) {
colClass = e.attr('custom-class');
}
if(e.hasAttr('open')) {
checked = "true";
}
colId = e.index() + '-collapsable';
colTitle = e.find('label').html();
colContent = e.find('section').clone(true);
var data = {
customClass: colClass,
collapsableId: colId,
collapsableTitle: colTitle,
collapsableContent: colContent
};
var collapseTemplate = Handlebars.templates['collapsable-blocks-template-compiled'];
var result = collapseTemplate(data);
e.replaceWith(result);
});
这是可行的Handlebars模板 - 未编译
<button
{{#if thisHasId}} id="{{buttonId}}" {{/if}}
class="btn {{buttonSecondary}}{{buttonPosition}}{{buttonInvert}}{{buttonCustom}}{{buttonSmall}}{{buttonSpinner}}{{buttonGrouped}}{{buttonIcon}}"
{{#if thisIsDis}} {{buttonDisabled}} = "{{buttonDisabled}}" {{/if}}
{{#if thisIsRead}} {{buttonReadonly}} = "{{buttonReadonly}}" {{/if}}>
{{#if thisIsIcon}}
<svg class="icon-bg {{iconName}}">
<use xlink:href="#{{iconName}}"></use>
</svg>
<span>{{{buttonName}}}</span>
{{/if}}
{{#if thisIsSpinner}}
<span class="btn-text">{{{buttonName}}}</span>
<span class="btn-spinner"></span>
<span class="btn-response"></span>
{{/if}}
{{#if thisIsStandard}}
{{{buttonName}}}
{{/if}}
</button>
不起作用的Handlebars模板 - 未编译
<div class="mod-collapsable {{customClass}}">
<input id="{{collapsableId}}" type="checkbox" {{#if checked}} checked="checked" {{/if}}>
<label for="{{collapsableId}}" class="mod-collapsable_title">
{{collapsableTitle}}
</label>
<div class="mod-collapsable_body">
{{collapsableContent}}
</div>
</div>