Question

我一直试图用一个没有余烬数据的小例子来强化余烬。应用程序在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);
        }
    }
});

Answer 1

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

Answer 2

您应该使用addObject的{{1}}和popObject方法来操作数组。（请注意，我删除了App.data上的设置。不需要。）以下是CarsController的示例：

Ember.Arrayproxy

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

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();
        }
    }
});

除非我回家并回到路线，否则Ember不会更新我的页面

2 个答案: