TypeError:不是函数 - 把手

时间:2016-05-10 11:38:35

标签: handlebars.js

我有两个脚本,每个脚本都有自己的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>

0 个答案:

没有答案