http://jsbin.com/aconeh/3/edit?html,js,output
http://ember101.com/videos/003-displaying-a-list-of-data
App = Ember.Application.create();
App.Router.map(function() {
this.resource('about');
this.resource('calc');
this.resource('todo');
this.resource('phones');
});
var users = [
{
id: 1,
first: 'Ryan',
last: 'Florence',
avatar: 'https://si0.twimg.com/profile_images/3123276865/5c069e64eb7f8e971d36a4540ed7cab2.jpeg'
,phone:'0938535359'
},
{
id: 2,
first: 'Tom',
last: 'Dale',
avatar: 'https://si0.twimg.com/profile_images/1317834118/avatar.png'
,phone:'0938535349'
},
{
id: 3,
first: 'Yehuda',
last: 'Katz',
avatar: 'https://si0.twimg.com/profile_images/3250074047/46d910af94e25187832cb4a3bc84b2b5.jpeg'
,phone:'0938535459'
}
];
App.PhonesRoute = Ember.Route.extend({
//modelis a reserved word can't write to smodel or xname or yname..etc
model: function() {
console.log(users);
return users;
}
});
App.PhonesController = Ember.Controller.extend({
search: '',
actions: {
query: function function_name() {
var str = this.get('search');
console.log(str);
}
}
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ember Starter Kit</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="js/libs/jquery-1.10.2.js"></script>
<script src="js/libs/ember.min.js"></script>
<script src="js/libs/ember-template-compiler.js"></script>
<script src="js/libs/ember.prod.js"></script>
<script src="js/libs/handlebars-v3.0.3.js"></script>
<script src="js/libs/bootstrap.min.js"></script>
<script type="text/javascript" src="ember-data.min.js"></script>
<script type="text/javascript" src="state.js"></script>
<script type="text/javascript" src="state_manager.js"></script>
<script src="js/app.js"></script>
<!-- to activate the test runner, add the "?test" query string parameter -->
<script src="tests/runner.js"></script>
<script type="text/x-handlebars" data-template-name="phones">
{{input type="text"value=search placeholder="text to query..." action="query"}}
<br>
<ul class="list-group">
<li class="list-group-item">1</li>
{{#each phone in model}}
//sould be ":list-group-item" not "list-group-item"
<li {{ bindAttr class=":list-group-item" }} >
{{phone.first}} , {{phone.last}}
</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars">
<div id='top'>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">I am keith</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#/about">about</a></li>
<li><a href="#/calc">calc</a></li>
<li><a href="#/todo">todo</a></li>
<li><a href="#/phones">phones</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div id='contents'>
{{outlet}}
</div>
<div id='footer'>
Copyright © 2015 LFO keith. All rights reserved
</div>
</script>
<script type="text/x-handlebars" data-template-name="about">
<div class="jumbotron">
<div class="container">
<h1>My ember website!</h1>
<p>This my pratices</p>
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="calc">
this is calc
</script>
<script type="text/x-handlebars" data-template-name="todo">
this is todo
</script>
</body>
</html>
沒有留言:
張貼留言