把手不能渲染?

时间:2015-04-05 20:20:02

标签: javascript jquery laravel handlebars.js

我一直关注这个tutorial以便为我的Laravel应用程序开发一个聊天系统,但是有些事情似乎已经过时了,我真的很喜欢Handlebars和JS。在步骤“创建界面”中,我尝试将教程中提供的代码调整为Handlebars 3.0中所需的语法,但我得到的只是一个空白页面。看起来Handlebars视图根本没有渲染,我可能会陷入一些非常基本的问题。这是我的代码。

chat.blade.php

<!DOCTYPE html>
<html lang="pt">
    <head>
    <meta charset="UTF-8" />
        <link
            rel="stylesheet"
            type="text/css"
            href="{{ asset("css/bootstrap.css") }}"
        />
        <link
            rel="stylesheet"
            type="text/css"
            href="{{ asset("css/bootstrap.theme.css") }}"
        />
        <title>Laravel 4 Chat</title>
    </head>
    <body>
        <script type="text/x-handlebars-template">
            @{{outlet}}
        </script>
        <script
            type="text/x-handlebars-template"
            data-template-name="chat"
            id='chat'
        >
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h1>Laravel 4 Chat</h1>
                        <table class="table table-striped">
                            @{{#each}}
                                <tr>
                                    <td>
                                        @{{user}}
                                    </td>
                                    <td>
                                        @{{text}}
                                    </td>
                                </tr>
                            @{{/each}}
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="input-group">
                            <input
                                type="text"
                                class="form-control"
                            />
                            <span class="input-group-btn">
                                <button class="btn btn-default">
                                    Send
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </script>
        <script
            type="text/javascript"
            src="{{ asset("js/shared.js") }}"
        ></script>
        <script
            type="text/javascript"
            src="{{ asset("js/jquery-1.11.2.min.js") }}"
        ></script>
        <script
            type="text/javascript"
            src="{{ asset("js/handlebars-v3.0.0.js") }}"
        ></script>
        <script
            type="text/javascript"
            src="{{ asset("js/handlebars.runtime-v3.0.0.js") }}"
        ></script>
        <script
            type="text/javascript"
            src="{{ asset("js/ember.debug.js") }}"
        ></script>
        <script
            type="text/javascript"
            src="{{ asset("js/ember-data.js") }}"
        ></script>
        <script
            type="text/javascript"
            src="{{ asset("js/bootstrap.js") }}"
        ></script>
        <script type="text/javascript">
            $(document).ready( function() {
                var source   = $("#chat").html();
                var template = Handlebars.compile(source);
            });
        </script>
    </body>
</html>

shared.js:

// 1
var App = Ember.Application.create();
// 2
App.Router.map(function() {
    this.resource("chat", {
        "path" : "/chat/"
    });
});
// 3
App.Message = DS.Model.extend({
    "user" : DS.attr("string"),
    "text" : DS.attr("string")
});
// 4
App.ApplicationAdapter = DS.FixtureAdapter.extend();
// 5
App.Message.FIXTURES = [
    {
        "id"   : 1,
        "user" : "Chris",
        "text" : "Hello World."
    },
    {
        "id"   : 2,
        "user" : "Wayne",
        "text" : "Don't dig it, man."
    },
    {
        "id"   : 3,
        "user" : "Chris",
        "text" : "Meh."
    }
];

提前致谢!

1 个答案:

答案 0 :(得分:0)

我认为目前ember不支持把手(hdbs)3.0。

请查看此post for a handlebars update info。不确定这是否是最新的,但似乎只支持hdbs 1.x.

由于Ember已更改为HTMLBars,请参阅此post以获取更改的信息。他们可能不会添加对hdbs 3.0的支持。

还有一个jsbin,您可以在其中查看如何使用最新版本的emberJS。