為什么此余燼組件無法渲染？

Question

我正在嘗試學習ember.js框架。 我已經編寫了一個組件，但是它不起作用（無法渲染）。 我不知道我犯了什么錯誤。 請幫忙！ 我已經嘗試了一切！

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>COMPONENT</title>
    <script src="js/libs/jquery-1.10.2.js"></script>
    <script src="js/libs/handlebars-1.1.2.js"></script>
    <script src="js/libs/ember-1.2.0.js"></script>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="js/app.js"></script>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <script type="text/x-handlebars">
        <div>
            prova
        </div>
        <button {action "Graph" data}}{{#link-to "Graph"}}>
            graph{{/link-to}}
        </button>
        {{outlet}}
    </script>
    <script type="text/x-handlebars" id="Graph" data-template-name="component/Graph">
        <div id="BC">
            <div id="Gphic">
            </div>
        </div>
    </script>
</body>
</html>

app.js

App = Ember.Application.create();

App.Router.map(function () {
   this.route("Graph");
});

App.GraphController = Ember.Controller.extend({});

App.AppGraphComponent = Ember.Component.extend({
   actions: {
       Graph: function () {
           for (var i = 0; i < 3; i++) {
               jquery("<p/>", {
                   text: i
               }).appendTo("#BC")
           }
       }
   }
})


App.GraphRoute = Ember.Route.extend({
   module: function () {
       return data;
   }
})

var data = ...

請說明我哪里出錯了。

Answer 1

我認為您的應用程序模板中仍然存在錯誤

<button {action "Graph" data}}{{#link-to "Graph"}}>
            graph{{/link-to}}
        </button>

它應該具有操作或鏈接，但不能同時具有。 嘗試

{{#link-to "Graph"}}<button type="button">Graph</button> {{/link-to}}

代替。

我也認為您的命名約定不正確。 您的圖形模板的ID應該為“ graph”，小寫字母為“ g”。

有什么渲染嗎？ 這是beginners-一個偉大的ember.js教程http://coding.smashingmagazine.com/2013/11/07/an-in-depth-introduction-to-ember-js/

為什么此余燼組件無法渲染？

問題描述

1 個解決方案

解決方案1
0 已采納 2013-12-04 15:59:15

為什么此余燼組件無法渲染？

問題描述

1 個解決方案

解決方案1 0 已采納 2013-12-04 15:59:15

解決方案1
0 已采納 2013-12-04 15:59:15