I am building a collection on Backbone.Marionette heavily basing myself on the example provided by David Sulc on his book 'A Gentle Introduction to Backbone.Marionette' available here https://github.com/davidsulc/marionette-gentle-introduction/commit/175fc9b7bddfa6fea86954eb769c0cfb3e163c1e.
for the moment i am still doing everything inline:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Marionette Contact Manager</title>
<link href="./css/bootstrap.css" rel="stylesheet">
<link href="./css/application.css" rel="stylesheet">
<link href="./css/jquery-ui-1.10.0.custom.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<span class="brand">Secret Identities</span>
</div>
</div>
</div>
<div id="main-region" class="container">
//main area
</div>
<script type="text/template" id="contact-list-item">
<td> <%= lastName %></td><td> <%= firstName %> </td><td> <%= occupation %> </td>
</script>
<script type="text/template" id="contact-list">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Occupation</th>
</tr>
</thead>
<tbody>
</tbody>
</script>
<script src="./js/vendor/jquery.js"></script>
<script src="./js/vendor/json2.js"></script>
<script src="./js/vendor/underscore.js"></script>
<script src="./js/vendor/backbone.js"></script>
<script src="./js/vendor/backbone.marionette.js"></script>
<script type="text/javascript">
var Application = new Marionette.Application();
Application.addRegions({
mainRegion: "#main-region"
});
Application.Contact = Backbone.Model.extend({
urlRoot: "/rest/example/listHeroes"
});
Application.ContactCollection = Backbone.Collection.extend({
model: Application.Contact,
url: "/rest/example/listHeroes",
comparator: "firstName"
});
Application.ContactItemView = Marionette.ItemView.extend({
tagName: "tr",
template: "#contact-list-item"
});
Application.ContactsView = Marionette.CompositeView.extend({
tagName: "table",
className: "table table-hover",
template: "#contact-list",
itemView: Application.ContactItemView,
itemViewContainer: "tbody"
});
Application.on("initialize:after", function () {
var list = new Application.ContactCollection;
list.fetch();
var contactsView = new Application.ContactsView({
collection: list
});
Application.mainRegion.show(contactsView);
});
Application.start();
</script>
</body>
</html>
</body>
</html>
the Json Array returned by the rest get is
[{"firstName":"Bruce","lastName":"Wayne","occupation":"Industrialist"},{"firstName":"Steve","lastName":"Rogers","occupation":"Soldier"},{"firstName":"Natasha","lastName":"Romanov","occupation":"spy"},{"firstName":"Clark","lastName":"Kent","occupation":"Reporter"},{"firstName":"Hal","lastName":"Jordan","occupation":"Pilot"}]
Any help would be greatly appreciated.
I figured it out. Looks like a Backbone bug.
When you add the items to the collection it calls Collection.set which first puts all the fetched elements in an array called toAdd. Then it adds from the toAdd collection to the internal models collection but then it triggers the events on the toAdd collection! Therefore the "add" events are triggered in the same order as you received them from the server.
https://github.com/jashkenas/backbone/blob/master/backbone.js#L733
Marionette hooks to the "add" event so it can render the elements and therefore they are rendered in the same order of the toAdd collection which is the order you receive from the server.
So to fix the issue you can pass {reset: true} in the options of the fetch call:
http://backbonejs.org/#Collection-fetch
Thanks,
Boris
Edit: I don't think this is a Backbone bug, I think this is intentional for performance.
Not sure if only writing the model field name as comparator would help. Instead you can write a custom function in comparator something like below:
comparator : function (m1, m2) {
var str1, str2;
str1 = m1.get('firstName');
str2 = m2.get('firstName');
if (str1 && str2) {
str1 = str1.toLowerCase();
str2 = str2.toLowerCase();
if (str1 > str2) {
return 1;
} else if(str2 > str1) {
return -1;
}
}
}
This would sort your collection every time you add/remove a model to the collection or call the collections sort method
Related
I have a list view that displays some contents from the api and along side a button that when clicked should show the details of the corresponding item from the list-view on another page, how to associate the button to the specific id and how to present a generic url that accepts these ids to route accordingly. I saw many similar posts but I didn't know how to route those or can't understand how each model is called at that route. Here's my current app, where I've not generalised the routing instead each button is associated to the first id and a route like /1 which takes it to a view to display details of the first element from the collection alone.
pollsscript.js
//defining the model
var QuestionModel = Backbone.Model.extend({
// urlRoot : "http://localhost:8000/polls/api/v1/question/",
});
//defining collection
var QuestionCollection = Backbone.Collection.extend({
url : "http://localhost:8000/polls/api/v1/question/",
model: QuestionModel
});
//list view of all the questions
var QuestionListView = Backbone.View.extend({
el: '.page',
render : function(){
var context = {};
this.questionCollection = new QuestionCollection();
this.questionCollection.fetch({
success: () => {
context['models'] = this.questionCollection.toJSON();
var template = _.template($('#question-list-template').html(),{});
this.$el.html(template(context));
}
})
return this;
}
});
//individual questions
var QuestionDetailsView = Backbone.View.extend({
el: '.page',
render : function(){
var context = {};
this.questionCollection = new QuestionCollection();
this.questionCollection.fetch({
success: () => {
context['model'] = this.questionCollection.get(1).toJSON();
var template = _.template($('#question-detail-template').html(),{});
this.$el.html(template(context));
}
})
return this;
}
});
var questionListView = new QuestionListView();
var questionDetailsView = new QuestionDetailsView();
var PageRouter = Backbone.Router.extend({
routes: {
'' : 'home',
'1' : 'details',
},
home : function(){
questionListView.render();
},
details: function(){
questionDetailsView.render();
},
});
//initializing router and setting up history for routing to work
var pageRouter = new PageRouter();
Backbone.history.start();
index.html
<html>
<head>
<title> </title>
</head>
<body>
<div class="container">
<h1>All polls</h1>
<div class="page"></div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!-- main page template -->
<script type="text/template" id="question-list-template">
<table class = "table table-striped">
<thead>
<tr>
<th>Question</th>
<!-- <th>Date Published</th> -->
<th>Votes</th>
<th>Popular responses</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<% _.each(models, function(model){ %>
<tr>
<td><%= model.question_text %></td>
<!-- <td><%= model.pub_date%></td> -->
<td><%= model.total_votes%></td>
<td><%= model.pop_response%></td>
<td>Show details</td>
</tr>
<% }); %>
</tr>
</tbody>
</table>
</script>
<script type="text/template" id="question-detail-template">
<div>
<div><%= model.question_text %><div/>
<div>
<% _.each(model.choices, function(choices){ %>
<div><%= choices.choice_text %></div>
<div><%= choices.votes %></div>
<% }); %>
</div>
</div>
</script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="backbone-min.js"></script>
<script type="text/javascript" src="pollsscript.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</script>
</body>
</html>
index.html
<html>
<head>
<title> </title>
</head>
<body>
<div class="container">
<h1>All polls</h1>
<div class="page"></div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!-- main page template -->
<script type="text/template" id="question-list-template">
<table class = "table table-striped">
<thead>
<tr>
<!-- <th> ID </th> -->
<th>Question</th>
<th>Votes</th>
<th>Popular responses</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<% _.each(models, function(model){ %>
<tr>
<!-- <td id="id"><%= model.id %></td> -->
<td><%= model.question_text %></td>
<td><%= model.total_votes%></td>
<td><%= model.pop_response%></td>
<td><a href="#<%= model.id %>" class="btn btn-info show-details">Show details</button></td>
<!-- <td><a href="#<%= model.id %>" class="btn btn-info show-details" data-id="<%= model.id %>">Show details</button></td> -->
</tr>
<% }); %>
</tr>
</tbody>
</table>
</script>
<script type="text/template" id="question-detail-template">
<div>
<div><%= model.question_text %><div/>
<div>
<% _.each(model.choices, function(choices){ %>
<div><%= choices.choice_text %></div>
<div><%= choices.votes %></div>
<% }); %>
</div>
</div>
</script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="backbone-min.js"></script>
<script type="text/javascript" src="pollsscript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</script>
</body>
</html>
pollsscript.js
//defining the model
var QuestionModel = Backbone.Model.extend({
// urlRoot : "http://localhost:8000/polls/api/v1/question/",
});
//defining collection
var QuestionCollection = Backbone.Collection.extend({
url : "http://localhost:8000/polls/api/v1/question/",
model: QuestionModel
});
//list view of all the questions
var QuestionListView = Backbone.View.extend({
el: '.page',
template : _.template($('#question-list-template').html()),
render : function(){
var context = {};
this.questionCollection = new QuestionCollection();
this.questionCollection.fetch({
success: () => {
context['models'] = this.questionCollection.toJSON();
this.$el.html(this.template(context));
}
})
return this;
},
// events: {
// 'click .show-details' : 'viewDetails',
// },
// viewDetails : function(e){
// var id = $(e.currentTarget).data("id");
// var item = this.questionCollection.get(id);
// var questionDetailsView = new QuestionDetailsView({
// model: item
// });
// questionDetailsView.render(); //get and pass model here
// }
});
//individual questions
var QuestionDetailsView = Backbone.View.extend({
el: '.page',
template : _.template($('#question-detail-template').html()),
render : function(){
var context = {};
context['model'] = this.model.toJSON();
this.$el.html(this.template(context));
return this;
}
});
var PageRouter = Backbone.Router.extend({
routes: {
'' : 'home',
':id' : 'details'
},
home : function(){
var questionListView = new QuestionListView();
questionListView.render();
},
details : function(id){
//alert(id);
var context = {};
this.questionCollection = new QuestionCollection();
this.questionCollection.fetch({
success: () => {
var item = this.questionCollection.get(id);
var questionDetailsView = new QuestionDetailsView({
model: item
});
questionDetailsView.render();
}
})
}
});
//initializing router and setting up history for routing to work
var pageRouter = new PageRouter();
Backbone.history.start();
I tried this, later, I associated the data-id with the button and gave the model.id I fetched from the api and then got the id on click and then passed the model to be rendered on the detail-view.
Still this doesn't change the router in anyway so still looking for a better way to do it.
Edit
Updated the code and fixed by associating model id with href, and created routes to fetch and get the model from in the router function.
var myApp = angular.module('myApp',[]);
myApp.controller('myCtrl',['$scope',function($scope){
$scope.tableData = ['hello','blue','angular'];
//set ture ok but only first time
//设置 true 可以 但是 只有第一次可以
//$scope.selectClass = true;
$scope.reset = function(){
console.log('reset');
$scope.selectClass = false;
}
}]).directive('myTd',function(){
return {
restrict : 'A',
link : function(scope,elem){
$(elem).on('click',function(){
if($(this).hasClass('selected')){
$(this).removeClass('selected')
}else{
$(this).addClass('selected');
}
})
}
}
});
.selected {background: #139029;}
<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.3/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles/bootstrap.min.css">
<style>
.selected {background: #139029;}
</style>
</head>
<body ng-controller="myCtrl">
<div class="container-fluid">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>item1</th>
<th>item2</th>
<th>item3</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in [1,2,3]">
<td ng-class="{'selected':selectClass}" ng-repeat="item in tableData" my-td >{{item}}</td>
</tr>
</tbody>
</table>
<button class="btn btn-danger btn-block" ng-click="reset();">重置表格</button>
</div>
</body>
<script src="lib/angular.1.5.5.min.js"></script>
<script src="lib/jquery.2.2.2.min.js"></script>
<script src="src/resetTable.js"></script>
</html>
i click button reset class not work, why? who can tell me. thanks very much!!
You don't need that directive (and you don't need to manipulate the DOM yorself). ng-class is itself a built-in directive that does just that.
Just delete your myTd directive and change your element to this:
<td ng-class="{'selected':selectClass}" ng-repeat="item in tableData" ng-click="selectClass = !selectClass" >{{item}}</td>
Actually what you want to do to achieve your requirement by preserving the directive is to remove the class selected from your table rows
To do that modify the reset function as follows
$scope.reset = function(){
$('.selected').removeClass('selected');
}
This function selects all the elements with class name selected and will remove the class from those elements
I am a learner in angular JS. I am trying out the $http and set the corresponding value to the scope variable. But It doesnt work. Below is the snippet of the html.
<div ng-app="fileapp" ng-controller="myctl" ng-init="hidevar=true">
<div ng-hide="hidevar" class="ng-hide">
<table>
<tbody ng:repeat="x in dataobj">
<tr><td>{{x.url}}</td></tr>
</tbody>
</table>
</div></div>
below is the success call back script with angular js
success(function(data) {
console.log(data);
var d=angular.fromJson(data);
console.log('d is:'+d.url);
$window.alert(d.url);
$scope.dataobj=data;
//$scope.url=data.url;
$scope.hidevar =false;
I am getting the expected url string value in console.log and also in the window.alert. But the same is not getting refelected in $scope.dataobj=data; and
$scope.hidevar =false;
The ng hidden is not setting to false and also the json data from the service is not getting set to dataobj.
Below is the console output.
I changed the list div like the below but still no luck
<div ng-hide="hidevar" class="ng-hide">
<table>
<tbody>
<tr><td>{{dataobj.url}}</td></tr>
</tbody>
</table>
</div>
I added a hidden section and updated the hidden variable inside the scope but that is not reflecting.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<!--<script src="app.js"></script> -->
</head>
<body ng-app="plnkrApp" ng-controller="DemoController" ng-init="myvar=true">
<h1>Array</h1>
<table>
<tbody ng:repeat="x in array">
<tr>
<td>{{x.url}}</td>
</tr>
</tbody>
</table>
<h1>Object</h1>
<table>
<tbody ng:repeat="x in object">
<tr>
<td>{{x}}</td>
</tr>
</tbody>
</table>
<div ng-hide="myvar">
<p>Hidden Section</p>
</div>
<script>
var app = angular.module('plnkrApp', []);
app
.controller("DemoController", function($scope) {
$scope.array = [ {url: 'test1'}, {url: 'test2'}, {url: 'test3'}];
$scope.object = {url: 'test1'};
$scope.myvar=false;
});
</script>
</body>
</html>
The hidden section is not getting displayed. Why the data is not binding to hidden variable?
You're getting an object back, not multiple objects in an array.
Doing ng-repeat on this object would just need {{x}} instead of {{x.url}} but that's not right.
Create a test scope variable with an array of 2 or more of those objects. You'll see that it'll work the way you want.
$scope.test = [ {url: 'test1'}, {url: 'test2'}, {url: 'test3'}];
Edit: Here is a Plunkr showing the difference:
http://embed.plnkr.co/6wSuAPHPCSZF60Pph85V/
I'm trying to get Angular to display JSON data that I've managed to pull from a database and console also printing the data as expected, but table ng-repeat not displaying the data. even outside of the table data display properly. {{contactlists[0].name}}
<!DOCTYPE>
<html ng-app="nodeapp">
<head>
<title>AngularJs with Nodejs</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<div class="container" ng-controller="nodeappctrl">
<div class="row">
<h1>Angularjs with api's</h1>
<p>{{contactlists[0].name}}</p>
</div>
</div>
<div class="container">
<div class="row">
<table class="table">
<thead>
<tr>
<th>SNo</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlists">
<td>{{$index}}</td>
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<script type="text/javascript">
var nodeapp = angular.module('nodeapp', []);
nodeapp.controller('nodeappctrl', ['$scope', '$rootScope', '$log', '$http',
function($scope, $rootScope, $log, $http) {
var contactlist = {};
$http.get('/contactlist').success(function(data) {
$scope.contactlists = data;
//$scope.$apply();
console.log(JSON.stringify($scope.contactlists), null,2);
});
}
]);
</script>
<!--
// dummy data
var contactlists =[
{
name: 'Rajesh',
email: 'raj#g.com',
number: '11 - 111 - 11111'
}, {
name: 'Rajesh2',
email: 'raj2#g.com',
number: '22 - 222 - 222222'
}, {
name: 'Rajesh3',
email: 'raj3#g.com',
number: '33 - 333 - 333333'
}
]-->
</body>
</html>
</html>
Place ng-controller inside the <body> tag.
You used it in the <div> which is closed, so it's can't be available to the rest bottom of the code.
<body ng-controller="nodeappctrl">
//your code here..
</body>
The problem is here:
<div class="container" ng-controller="nodeappctrl">
The nodeappctrl controller should be applied to a tag that is a parent of where you're accessing its scope. As you can see, the table is a child of a sibling of the element the controller is bound to.
For example, move ng-controller="nodeappctrl" to the body tag.
any one help me to find our the issue, what is going on with my code..
i am getting the error as :
Uncaught SyntaxError: Unexpected token <
my code is here :
$(function() {
var userDetails=[
{firstName:'Lakshmi', lastName:'Narayanan',age:32},
{firstName:'Harish', lastName:'Manickam',age:28},
{firstName:'Madan', lastName:'Gopal',age:27}
]
var userModel = Backbone.Model.extend({
defaults:{
firstName:"",
lastName:"",
age:""
}
});
var userList = Backbone.Collection.extend({
model:userModel
});
var userView = Backbone.View.extend({
tagName:"tr",
className:"userList",
template: $("#listTempalate").html(),
render:function(){
var temp = _.template(this.template);
this.$el.html(temp(this.model.toJSON()));
return this;
}
});
var usersView = Backbone.View.extend({
el:"tbody",
initialize:function(){
this.collection = new userList(userDetails);
this.render();
},
render:function(){
var that = this;
_.each(this.collection.models, function(item){
that.$el.append(new userView({model:item}).render().el);
})
}
});
var Router = Backbone.Router.extend({
routes:{
'' : 'home'
}
});
var router = new Router();
router.on('route:home', function(){
var defaultUser = new usersView();
})
Backbone.history.start();
});
my HTML :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,Chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<title>User Manager</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>User Manager</h1>
<hr>
<div class="page">
<table class="table striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Edit</th>
</tr>
</thead>
<tbody id="insertRows">
</tbody>
</table>
</div>
</div>
<script id="listTempalate" type="text/template">
<td><%= firstName %></td>
<td><%= lastName %></td>
<td><%= age %></td>
<td><%= <a hre="#/edit/<%= user.id %>" class="btn">Edit</a></td>
</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script type="text/javascript" src="js/userManager.js"></script>
</body>
</html>
Seriously i unable to find my issue here to fix it. as well any one suggest me to find the issue for backbone.js online..
so let me keep check my code..
Thanks in advance..
Pretty sure it is to do with this line in your HTML
<td><%= <a hre="#/edit/<%= user.id %>" class="btn">Edit</a></td>
You open the <%= and then open it again /edit/<%= which I think is causing the problem. Even if opening it twice is allowed, you haven't added a final %> to the line.
Play around with that and let us know how it goes.
EDIT
Try this instead
<td> Edit</td>
You shouldn't need to wrap the entire thing in the <% and %> tags, just the part you want to output.