为什么此余烬组件无法渲染？

Question

I'm trying to learn the ember.js framework. 我正在尝试学习ember.js框架。 I've written a component but it doesn't work (it fails to render). 我已经编写了一个组件，但是它不起作用（无法渲染）。 I don't know what mistake I've made. 我不知道我犯了什么错误。 Please help! 请帮忙！ I have tried everything! 我已经尝试了一切！

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 = ...

Please explain where I've gone wrong. 请说明我哪里出错了。

Answer 1

I think you've got an error in your application template anyway 我认为您的应用程序模板中仍然存在错误

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

It should have either an action or a link, but not both. 它应该具有操作或链接，但不能同时具有。 Try 尝试

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

instead. 代替。

Also I think your naming conventions are incorrect. 我也认为您的命名约定不正确。 The id for your graph template should be "graph", with a lowercase "g". 您的图形模板的ID应该为“ graph”，小写字母为“ g”。

Is anything rendering at all? 有什么渲染吗？ This is a great ember.js tutorial for beginners- http://coding.smashingmagazine.com/2013/11/07/an-in-depth-introduction-to-ember-js/ 这是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