emberjs 而不是渲染组件，这是渲染

Question

我是 emberjs 的新手，我正在尝试遍历 arr 并使用数组元素的内容呈现 table 每个循环呈现  而不是 [= 中的行18=] 我究竟做错了什么？这是我的代码： app.js

arr=[{id:1,name:foo,completed:'yes'},{id:2,name:'bar', completed:'no'}]
App= Ember.Application.create();
App.Router.map(function(){
})

App.IndexRoute=Ember.Route.extend({
    model: function(){
        return arr;
    }
})
App.SingleTaskComponent = Ember.Component.extend({
    templateName: "components/single-task",
    tagName: ""
});

App.TasksCollectionComponent = Ember.Component.extend({
    templateName: "components/tasks-collection",
    tagName: "tbody",
        actions: {
            newTask: function(){
                console.log("here");
            }
        }
 });

这是 hbs 代码：

<script type="text/x-handlebars" id="components/single-task">
    <tr {{bind-attr id=id}}>
        <td>
            <input type="text" name="task" {{bind-attr value=name}} >
        </td>
        <td>
            <input type="checkbox" name="completed">
        </td>
    </tr>
</script>
<script type="text/x-handlebars" id="components/tasks-collection">
    <tr>
        <td><button>+</button></td>
        <td>Tasks</td>
    </tr>
    {{#each model as |task|}}
        {{single-task id=task.id name=task.name completed=task.completed}}
    {{/each}}
</script>
<script type="text/x-handlebars"  id="index">
    <table>
        {{tasks-collection}}
    </table>
</script>

Answer 1

您的编码看起来好像没有使用 ember-cli。请使用它。在 this link you can go through enormous projects which are using ember, you can learn from them how are they using it. You can even play with ember-twiddle for easy learning. I will encourage you to follow ember guides tutorial.

关于你的问题，您需要将所需的数据传递给组件，

{{tasks-collection model=model}}

在单任务组件中，你可以避免使用 bind-attr，而是像

<tr id={{id}}>

参考deprecation guide bind-attr了解更多详情

emberjs 而不是渲染组件，这是渲染

emberjs instead of rendering component this was rendered

ember.js