CODEWITHSUNDEEP
javascriptember.jsember-cli
Prabhakar
Prabhakar

Reputation: 1192

Upgrade emberjs script to support latest version

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?

Upvotes: 0

Views: 36

Answers (1)

Surya Purohit
Surya Purohit

Reputation: 1120

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>

Here is the JSBin link

Upvotes: 1

Related Questions