Question

我是emberjs的新手，我正在尝试迭代arr并使用数组元素的内容呈现一个表，每个循环呈现而不是表中的行我究竟做错了什么？这是我的代码： 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中，您可以浏览使用ember的大型项目，您可以向他们学习如何使用它。您甚至可以使用ember-twiddle来轻松学习。我会鼓励你关注余烬guides tutorial。

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

{{tasks-collection model=model}}

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

那样使用它

<tr id={{id}}>

有关详细信息，请参阅deprecation guide bind-attr

emberjs而不是渲染组件，它被呈现为<！---->

1 个答案: