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应为“图表”，小写字母为“g”。

有什么渲染吗？对于初学者来说，这是一个很棒的ember.js教程 - http://coding.smashingmagazine.com/2013/11/07/an-in-depth-introduction-to-ember-js/

为什么这个ember组件不呈现？

1 个答案: