Question

当ember.js尝试渲染包含以下bindAttr的模板时。 handlebars.js

中抛出以下异常

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

绑定attr标签：

<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

在替换方法上崩溃，因为方法替换是未定义的

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);
    },

Answer 1

首先，您需要定义只需要定义控制器。您不必创建实例。应用程序初始化时，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'}}

这应该是你的问题的答案。的 BUT

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

Answer 2

我终于找到了一些时间来解决这个问题。

我所做的就是更换余烬和车把js文件，现在代码工作正常，谢谢

{{bindAttr}} {{action}} [Object]没有方法替换

2 个答案: