升级 emberjs 脚本以支持最新版本答案

【问题标题】：Upgrade emberjs script to support latest version升级 emberjs 脚本以支持最新版本
【发布时间】：2016-04-30 20:43:54
【问题描述】：

我正在使用

Emberjs：v1.8.0

我有以下简单的代码

<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>

此脚本中使用的 emberjs 版本似乎已过时。而且我听说最新版本的 emberjs(v2.4.x) 的工作方式完全不同。

我想升级脚本以支持最新版本的 emberjs。

对我有什么帮助吗？

我要花很多时间来学习整个最新版本的 emberjs。

非常感谢，如果有人对此有快速的解决方案。

为了使上述脚本支持最新版本的 emberjs，我需要做哪些更改？

【问题讨论】：

标签： javascript ember.js ember-cli

【解决方案1】：

是的，这可以通过简单的方式完成。您可以使用最新 ember 的 cdns，而不是查看此处，您可以使用索引控制器。由于不推荐使用视图，因此您可以使用组件而不是如下视图：

<!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

【讨论】：