so I'm learning Ember.js and I am trying to display a number value but for some reason it's changing the value to another number. I think that what is happening is that ember is automatically converting the number to something else for some reason, but not sure why. I would greatly appreciate if someone would help me with this question. Thanks in advance!
Javascript:
App = Ember.Application.create();
App.Router.map(function() {
this.resource('liens', function(){});
this.resource('portfolio', function(){});
});
App.IndexRoute = Ember.Route.extend({
model: function(){
return App.Liens;
}
});
App.Liens=[
{
id: 1,
apn: 'apn1',
fips: 01700,
state: 'CA',
county: 'Los Angeles',
address: 'somewhere st123',
},
{
id: 2,
apn: 'apn2',
fips: 01744,
state: 'FL',
county: 'Miami',
address: 'someplace st700',
},
{
id: 3,
apn: 'apn3',
fips: 05690,
state: 'FL',
county: 'Orlando',
address: 'ExactPlace in st111',
}
];
App.Liens = Ember.Model.extend({
id: DS.attr('number'),
apn: DS.attr('string'),
fips: DS.attr('number'),
state: DS.attr('string'),
county: DS.attr('string'),
address: DS.attr('string')
});
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://ift.tt/1x2iORp">
<script src="http://ift.tt/1ryZ1pe"></script>
<script src="http://ift.tt/1HQ7eLT"></script>
</head>
<body>
<script type="text/x-handlebars">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
{{#link-to 'index' tagName='a' classNames='navbar-brand'}}Project name{{/link-to}}
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>{{#link-to 'portfolio' tagName='a'}}Portfolio{{/link-to}}</li>
<li><a href="">Settings</a></li>
<li><a href="">Profile</a></li>
<li><a href="">Help</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container">
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="index">
<h2 class="sub-header" >Liens</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>id</th>
<th>apn</th>
<th>fips code</th>
<th>State</th>
<th>County</th>
<th>Address</th>
</tr>
<tbody>
{{#each lien in model}}
<tr>
<td>{{lien.id}}</td>
<td>{{lien.apn}}</td>
<td>{{lien.fips}}</td>
<td>{{lien.state}}</td>
<td>{{lien.county}}</td>
<td>{{lien.address}}</td>
</tr>
{{/each}}
</thead>
</script>
</body>
</html>
I tried adding a controller like this:
App.IndexController = Ember.Controller.extend({
fipsCode: Ember.computed.alias('fips')
});
I changed it in the html to lien.fipsCode and it displays nothing
Aucun commentaire:
Enregistrer un commentaire