Upgrade emberjs script to support latest version
Question
I am using
Emberjs: v1.8.0
and I have the following simple code
<html>
<head>
<title>Important data</title>
<script src="/handlebars.min.js"></script>
<script src="/jquery-2.1.3.min.js"></script>
<script src="/ember.min.js"></script>
<script src="/ember-template-compiler.js"></script>
<script src="/ember.debug.js"></script>
<script src="/ember-data.js"></script>
</head>
<body>
<script type="text/x-handlebars">
{{view App.View contentBinding="model"}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{#if view.isShowVisible}}
Name : <font color='blue'>{{view.content.Name}}</font><br>
City : <font color='blue'>{{view.content.City}}</font><br>
State : <font color='blue'>{{view.content.State}}</font><br>
<button {{action "importantdata" target="view"}}>Edit</button>
{{else}}
Name : {{input type="text" value=view.content.Name}}<br>
City : {{input type="text" value=view.content.City}}<br>
State : {{input type="text" value=view.content.State}}<br>
<button {{action "importantdata" target="view"}}>Done</button>
{{/if}}
</script>
<script type="text/javascript">
App = Ember.Application.create();
App.ApplicationRoute = Ember.Route.extend({
model: function() {
return [{otherdata:''}];
}
});
App.View = Ember.View.extend({
templateName: 'index',
isShowVisible: true,
actions: {
importantdata: function(){
this.toggleProperty('isShowVisible');
}
}
});
</script>
</body>
</html>
The emberjs version used in this script seems to be outdated. And also I heard that the latest version of emberjs(v2.4.x) is working in whole different way.
I want to upgrade the script to support the latest version of emberjs.
Any help for me on this?
It would take much time for me to learn entire latest version of emberjs.
Much appreciated, if anyone has quick solution for me on this.
What are the changes I have to done to make the above script to support latest version of emberjs?
1 answers
solution1
1 ACCPTED 2016-04-30 12:43:54
Yes this can be done in a simple way. You can use the cdns of the latest ember and instead of view here you can use index controller. As views are deprecated, you can use components instead of views like below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Important Data</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.5.1/ember-template-compiler.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.5.1/ember.debug.js"></script>
</head>
<body>
<script type="text/x-handlebars" id- "application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{#if isShowVisible}} Name :
<font color='blue'>{{Name}}</font>
<br> City :
<font color='blue'>{{City}}</font>
<br> State :
<font color='blue'>{{State}}</font>
<br>
<button {{action "importantdata"}}>Edit</button>
{{else}} Name : {{input type="text" value=Name}}
<br> City : {{input type="text" value=City}}
<br> State : {{input type="text" value=State}}
<br>
<button {{action "importantdata"}}>Done</button>
{{/if}}
</script>
<script type="text/javascript">
App = Ember.Application.create();
App.ApplicationRoute = Ember.Route.extend({
model: function() {
return [{
otherdata: ''
}];
}
});
App.IndexController = Ember.Controller.extend({
isShowVisible: true,
actions: {
importantdata: function() {
this.toggleProperty('isShowVisible');
}
}
});
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.