dimanche 21 décembre 2014

creating and adding new Ember View elements to the DOM in ember version 1.8

I have seen this work in previous versions of Ember but I cannot get it to work in version 1.8


I would like the addNewView method in the index controller to create and add new App.ReusableView with its designated template as an element to the DOM div. I have tried several combinations and none work with this ember version.


error



Error: Assertion Failed: You cannot append to an existing Ember.View. Consider using Ember.ContainerView instead.


index.html



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Playground Ember</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-v3.1.1.min.css">
</head>
<body>

<script type="text/x-handlebars">
<h2>main page</h2>
{{outlet}}
</script>

<script type="text/x-handlebars" id="index">
<button {{action 'addNewView'}}>addNewView</button>
<div id='divHolderId'></div>
</script>

<script type='text/x-handlebars' data-template-name='reusable'>
my reusable view content
</script>

<script src="js/libs/jqueryv1.11.0.min.js"></script>
<script src="js/libs/bootstrapv3.1.1.min.js"></script>
<script src="js/libs/handlebars-v1.3.0.js"></script>
<script src="js/libs/ember-1.8.1.js"></script>
<script src="js/app.js"></script>
</body>
</html>


app.js



App = Ember.Application.create();

App.IndexController = Ember.Controller.extend({
actions: {
addNewView: function() {
console.log('addNewView called');
var view = App.ReusableView.create();
view.appendTo('#divHolderId'); // error:
}
}
});

App.ReusableView = Ember.View.extend({
templateName: 'reusable'
});




1 commentaire: