我一直在尝试用一个没有 ember 数据的小例子来精简 ember。应用程序在 javascript 对象上有数据，我将其转换为 Ember 对象，但似乎我做错了什么，因为当我添加或删除数组的任何元素时，屏幕上显示的列表在我离开之前不会更新回到家，然后再次选择相同的路线。
我用小代码创建了一个 jsbin。我一直在寻找 ember 的其他示例，但我不明白我做错了什么。
请看一下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);
}
}
});