0

当 ember.js 尝试呈现包含以下 bindAttr 的模板时。在 handlebars.js 中抛出以下异常

Uncaught TypeError: Object [object Object] has no method 'replace'   handlebars.js:848

绑定属性标签：

<div class="postWrapper" {{bindAttr style="display:none"}}>

更新

当我使用动作助手时也会发生这种情况

    <div {{action Toggle}}  class="btn pull-right">
        <i class="postToggler icon-chevron-down " ></i>
    </div>

更新完整代码

模板

        <script type="text/x-handlebars" data-template-name="Composer">
                <div class="postWrapper">
                                <div class="postContentWrapper" {{bindAttr style="controller.display"}}>  
                    <div class="row-fluid">
                    <div class="pull-left span10">
                                        To :
                            <input id="test2" type="text" style="margin-top: 7px;width:90%" />
                    </div>
                    <div {{action Toggle}}  class="btn pull-right">
                        <i class="postToggler icon-chevron-down " ></i>
                    </div>
                    </div>

                    <div class="row-fluid" style="height:100%" >
                    <div id="wmd-button-bar" style="width:48%;display:inline-block" ></div>
                    <div class="pull-right">
                    <a>Hide preview</a>
                    </div>
                        <div class="wmdWrapper" style="height:80%">
                            <div class="wmd-panel" style="vertical-align: top;">

                                <textarea class="wmd-input" id="wmd-input" style="height: 100%;"></textarea>
                            </div>
                            <div id="wmd-preview" class="wmd-preview pull-right"></div>
                        </div>
                        <br />

                    </div>
                    <div class="row-fluid">

                    <div class="span6  ">
                        <p>
                            Tags :
                            <input id="test" type="text" style="width:80%"/>
                        </p>
                    </div>
                        <div class="span2 pull-right">
                        <button id="btnSubmitPost" class="btn btn-success pull-right">{{controller.buttonText}}</button>
                        <button id="btnCanelPost" class="btn btn-warning pull-right">Cancel</button>
                    </div>

                    </div>
                    <div class="row-fluid">

                    </div>
                    </div>
                </div>
        </script>

查看和渲染

        /*
        MODES
            NEW
            REPLY

        */
        Thoughts.ComposerController = Ember.Object.extend({
            mode: 2,
            visible: false,
            messageContent: "",
            buttonText: function () {
                switch (this.get("mode")) {
                    case 1: return "Post";
                    case 2: return "Reply";
                }
            }.property(),

            display: function () {
                if (this.get("visible")) {
                    return 'display:block';
                } else
                    return 'display:none';
            }.property(),

            Toggle: function(){
                console.log('Helllo');
                }
        });

        Thoughts.ComposerController = Thoughts.ComposerController.create();

错误信息

对象转储

            string: "data-ember-action="1""
            __proto__: Object
            constructor: function (string) {
            toString: function () {
            __proto__: Object

replace 方法崩溃，因为方法 replace 未定义

Handlebars.Utils = {
    escapeExpression: function (string) {
        // don't escape SafeStrings, since they're already safe
        if (string instanceof Handlebars.SafeString) {
            return string.toString();
        } else if (string == null || string === false) {
            return "";
        }

        if (!possible.test(string)) { return string; }
       ----> return string.replace(badChars, escapeChar);
    },
4

2 回答 2

0

我终于找到了一些时间来再次处理这个问题。

我所做的只是替换了 ember 和 handlebars js 文件，现在代码工作正常，谢谢

于 2013-05-09T11:04:30.297 回答
0

所以首先你需要定义只需要定义控制器。您不必创建实例。Ember 会在应用程序初始化时为您完成。

如果您定义一个正在观察另一个的属性，换句话说，它的值取决于另一个，您需要将其指定为property帮助器的参数。

Thoughts.ComposerController = Ember.Controller.extend({
    mode: 2,
    visible: false,
    messageContent: "",

    buttonText: function () {
        switch (this.get("mode")) {
            case 1: return "Post";
            case 2: return "Reply";
        }
    }.property('mode'),

    display: function () {
        return 'display:' + this.get('visible') ? 'block' : 'none';
    }.property('visible'),

    Toggle: function () {
        this.toggleProperty('visible');
        this.set('mode', this.get('mode') == 2 ? 1 : 2);
    }
});

模板本身似乎是有效的。

您可以通过创建这样的作曲家路线来完成这项工作：

this.route('composer');

或通过在另一个模板中呈现它，如下所示：

{{render 'composer'}}

那应该是你的问题的答案。但

{{if}}使用帮助器根据条件在模板内显示一些内容不是更好吗？

于 2013-04-20T21:14:54.140 回答