余烬不会更新我的页面，除非我回家并回到路线

Ember is not updating my page unless I go to home and the back to the route

本文关键字：回家 非我 更新 我的 余烬不      更新时间：2023-09-26

我一直试图用一个没有余烬数据的小例子来倾斜余烬。应用程序在javascript对象上有de数据，我将其转换为Ember 对象，但似乎我做错了什么，因为当我添加或删除数组的任何元素时，屏幕上显示的列表不会更新，直到我回到主页然后再次选择相同的路由。

我已经用小代码创建了一个 jsbin。我一直在寻找余烬的其他例子，但我不明白我做错了什么。

请看一下 http://jsbin.com/uRucAKUH/2/edit?html,js,output

任何建议都非常受欢迎;)我也在这里粘贴代码

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.0.0/ember.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
    <script type="text/x-handlebars">
      <h2>Welcome to Ember.js</h2>
        {{outlet}}
      </script>
      <script type="text/x-handlebars" data-template-name="index">
        <ul>
          <li>Cars: {{cars.length}}</li>
          <li>Bikes: {{bikes.length}}</li>
          <li>trucks: {{trucks.length}}</li>
        </ul>
        <ul>
            <li>{{#link-to 'cars'}} Show cars {{/link-to}}</li>
            <li>{{#link-to 'bikes'}} Show bikes {{/link-to}}</li>
        </ul>
    </script>
    <script type="text/x-handlebars" data-template-name="cars">
       <button {{action "del"}}>Delete</button>
       <button {{action "add"}}>Add</button>
          Cars
          <ul>
              {{#each item in model}}
              <li>Car name <label> {{#link-to 'car' item.id}}{{item.name}} {{/link-to}} </label>
      {{/each}}
          </ul>
          {{outlet}}
    </script>
    <script type="text/x-handlebars" data-template-name="bikes">
          <button {{action "del"}}>Delete</button>
          <button {{action "add"}}>Add</button>
          <ul>
              {{#each item in model}}
              <li>Bike name <label> {{#link-to 'bike' item.id}}{{item.name}} {{/link-to}} </label>
              {{/each}}
          </ul>
    </script>
    <script type="text/x-handlebars" data-template-name="car">
          <p>
              Car details
          </p>
          <ul>
              <li><label>name:  {{name}}</label></li>
              <li><label>Owner {{input type=checkbox checked=owner}}</label></li>
              <li><label>Id is {{id}}</label></li>
          </ul>
    </script>
</body>
</html>

还有JavaScript代码

App = Ember.Application.create();
App.Router.map(function(){
        this.resource("cars", function(){
            this.resource("car",{path: '/car/:id'});
        });
        this.resource("bikes", function(){
            this.resource("bike",{path: '/bike/:id'});
        });
});
var legacyData = {
    "cars": [
        {
            "name": "car 1",
            "id": 1,
            "owner": true
        },
        {
            "name": "car 2",
            "id": 2,
            "owner": true
        },
        {
            "name": "car 3",
            "id": 3,
            "owner": true
        }
    ],
    "bikes": [
        {
            "name": "bikes 1",
            "id": 1,
            "owner": true
        },
        {
            "name": "bikes 2",
            "id": 2,
            "owner": true
        },
        {
            "name": "bikes 3",
            "id": 3,
            "owner": true
        }
    ],
    "trucks": [
        {
            "name": "truck 1",
            "id": 1,
            "owner": true
        },
        {
            "name": "truck 2",
            "id": 2,
            "owner": true
        },
        {
            "name": "truck 3",
            "id": 3,
            "owner": true
        }
    ]
};
App.IndexRoute = Ember.Route.extend({
    model: function(){
        return App.data;
    }
});
App.CarsRoute = Ember.Route.extend({
    model: function(){
        return App.data.get("cars");
    }
});
App.CarRoute = Ember.Route.extend({
    find: function(param){
        console.log("Asking for specific CAcar "+param.id);
        var temp = App.data.cars.findBy('id',param.id);
        return temp;    }
});
App.CarsCarRoute = Ember.Route.extend({
    find: function(param){
        console.log("Asking for specific CarsCar "+param.id);
        var temp = App.data.cars.findBy('id',param.id);
        return temp;
    }
});
App.BikesRoute = Ember.Route.extend({
    model: function(){
        return App.data.get("bikes");
    }
});
App.Data = Ember.Object.extend();
App.data = App.Data.create(legacyData);
App.CarsController = Ember.ArrayController.extend({
    actions:{
        add: function(){
            var temp = App.data.get("cars");
            temp.push({
                id: "10001001",
                name: "Added Elem"
            });
            App.data.set("cars",temp);
        },
        del: function(){
            var temp = App.data.get("cars");
            temp.pop();
            App.data.set("cars",temp);
        }
    }
});
App.BikesController = Ember.ArrayController.extend({
    actions:{
        add: function(){
            var temp = App.data.get("bikes");
            temp.push({
                id: "10001001",
                name: "Added Elem"
            });
            App.data.set("bikes",temp);
        },
        del: function(){
            var temp = App.data.get("bikes");
            temp.pop();
            App.data.set("bikes",temp);
        }
    }
});

您应该使用方法addObject和popObject Ember.Arrayproxy来操作数组。（请注意，我删除了应用程序数据上的集合。它不是必需的。下面是 CarsController 的示例：

App.CarsController = Ember.ArrayController.extend({
    actions:{
        add: function(){
            var temp = App.data.get("cars");
            temp.addObject({
                id: "10001001",
                name: "Added Elem"
            });
        },
        del: function(){
            var temp = App.data.get("cars");
            temp.popObject();
        }
    }
});

但更好的做法是像下面这样做。与其将数组作为全局变量访问，不如直接操作 ArrayController 的数组。这样，ArrayController 就不会耦合到存储内容/模型数组的位置。您可能很快就会放弃全局数组（或者用 ajax 调用或其他方式替换它），并且这种方法仍然有效。

App.CarsController = Ember.ArrayController.extend({
        actions:{
            add: function(){
                this.addObject({
                    id: "10001001",
                    name: "Added Elem"
                });
            },
            del: function(){
                this.popObject();
            }
        }
    });

在 "del" 方法中，使用 popObject（） 而不是 pop（）

相关文章：