i am new to emberjs and i am trying create a simple todo app, i created a component "task" which is nested in another component tasks for some reason the component "task" is not rendered can someone help me? here is the code: app.js
App.IndexRoute=Ember.Route.extend({
model: function(){
return arr;
}
})
App.Task=DS.Model.extend({
name : DS.attr(),
completed: DS.attr()
});
App.IndexController= Ember.ArrayController.extend({
actions: {
newTask: function(){
}
}
});
App.SingleTaskComponent = Ember.Component.extend({
templateName: "components/single-task",
});
App.TasksView = Ember.View.extend({
templateName: "tasks",
actions: {
newTask: function(){
App.SingleTaskComponent.create().prependTo($('#tasks_list'));
}
}
});
var tasksView = App.TasksView.create();
tasksView.appendTo("body");
app.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Tasks</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="tasks/config/environment"
content="%7B%22modulePrefix%22%3A%22tasks%22%2C%22environment%22%3A%22development%22%2C%22rootURL%22%3A%22/%22%2C%22locationType%22%3A%22auto%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22tasks%22%2C%22version%22%3A%220.0.0+%22%7D%2C%22exportApplicationGlobal%22%3Atrue%7D" />
<link rel="stylesheet" href="/assets/vendor.css">
<link rel="stylesheet" href="/assets/tasks.css">
<script src="http://ift.tt/14MLMsl"></script>
<script src="http://ift.tt/2tWHfVn"></script>
<script src="http://ift.tt/2sDtyqc"></script>
<script src="http://ift.tt/2tWHeRj"></script>
<script type="text/javascript">
var tasks = <?php echo json_encode($tasks); ?>;
var arr = $.map(tasks, function(el) { return el });
alert(arr.length);
</script>
<script src="/assets/app.js"></script>
</head>
<body>
<script type="text/x-handlebars" id="components/single-task">
<tr >
<td>
<input type="text" name="task" >
</td>
<td>
<input type="checkbox" name="completed">
</td>
</tr>
</script>
<script type="text/x-handlebars" data-template-name="tasks">
<button >+</button>
<table id="tasks_list">
<tbody>
</tbody>
</table>
</script>
<script type="text/javascript">
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire