I am new to backbone and marionette; below is my current progress
<!DOCTYPE html>
<html>
<head>
<title>Marionette test</title>
<link rel="stylesheet" media="screen" href="./assets/libs/bootstrap/css/bootstrap.css">
<script src="./assets/libs/jquery.js"></script>
<script src="./assets/libs/bootstrap/js/bootstrap.js"></script>
<script src="./assets/libs/underscore.js"></script>
<script src="./assets/libs/backbone.js"></script>
<script src="./assets/libs/backbone.marionette.js"></script>
</head>
<body>
<br>
<br>
<br>
<div id="content" class="container"></div>
<script type="text/template" id="fDD">
<% _.each(dataD, function(dD) { %>
<td><%= dD %>
<% }); %>
</script>
<script type="text/template" id="fD2">
<h3> Zone: <%= zone %> </h3>
<div> Zone Data: <br> <%= zonedata %> </div>
<hr>
</script>
<script type="text/template" id="fD">
<caption><%= name %> ( <%= rollnum %> ), Project Code(<%= projectcode %>)</caption>
<thead>
<tr>
<% _.each(header, function(hh) { %>
<th><%= hh[1] %></th>
<% }); %>
</tr>
</thead>
<tbody id="sub-Region">
</tbody>
</script>
<script type="text/javascript">
var dataX = [{"zone": "X", "zonedata": {"name": "Mr XYZ", "rollnum": "51", "projectcode": "0256",
"header": [[0, "subtype"], [1, "Access Number"]],
"submissions": [{"dataD": ["A5", "5689-64123"]},
{"dataD": ["A8", "5689-64122"]},
{"dataD": ["D1", "5689-64122"]},
{"dataD": ["A5", "5689-64122"]}]}},
{"zone": "Y", "zonedata": {"name": "Mr ABC", "rollnum": "52", "projectcode": "3526",
"header": [[0, "subtype"], [1, "Access Number"]],
"submissions": [{"dataD": ["A5", "5689-64123"]},
{"dataD": ["A8", "5689-64122"]},
{"dataD": ["D1", "5689-64122"]},
{"dataD": ["A5", "5689-64122"]}]}},
{"zone": "Z", "zonedata": {"name": "Mr OPQ", "rollnum": "53", "projectcode": "4006",
"header": [[0, "subtype"], [1, "Access Number"]],
"submissions": [{"dataD": ["A5", "5689-64123"]},
{"dataD": ["A8", "5689-64122"]},
{"dataD": ["D1", "5689-64122"]},
{"dataD": ["A5", "5689-64122"]}]}}
];
MyApp = new Backbone.Marionette.Application();
MyApp.addRegions({
mainRegion: "#content"
});
var Submission = Backbone.Model.extend({});
var Submissions = Backbone.Collection.extend({
model: Submission
});
var SubmissionInfo = Backbone.Model.extend({});
var MainInfo = Backbone.Collection.extend({
model: SubmissionInfo
});
var Project = Backbone.Model.extend({});
FilingView = Backbone.Marionette.ItemView.extend({
tagName: "tr",
template: "#fDD"
});
TableView = Backbone.Marionette.CompositeView.extend({
tagName: "table",
itemView: FilingView,
template: "#fD",
itemViewContainer: "#sub-Region",
className: "table table-hover table-condensed"
});
var MyZoneView = Backbone.Marionette.ItemView.extend({
template: "#fD2"
});
var MyZoneCollection = Backbone.Marionette.CollectionView.extend({
itemView: MyZoneView
});
MyApp.addInitializer(function(options){
mycollection = []
_.each(options.data, function(d){
var projectInfo = new Project(d.zonedata);
var submissions = new Submissions(projectInfo.submissions);
var nn = new TableView({collection: submissions, model: projectInfo});
mycollection.push({"zone": d.zone, "zonedata": nn});
});
var myZoneCollection = new MyZoneCollection({collection: new MainInfo(mycollection)});
MyApp.mainRegion.show(myZoneCollection);
});
MyApp.start({data: dataX});
</script>
</body>
</html>
It renders the TableView as Object; not as a html. Any way to resolve this??
For above code; i am using:
Backbone.js 1.0.0
MarionetteJS v1.0.3
jQuery JavaScript Library v1.9.1
Underscore.js 1.4.4
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.
I am using AngularJS Dropdown Multiselect - http://dotansimha.github.io/angularjs-dropdown-multiselect/
the problem I am facing is the option attribute that is not binding to the model
<div style="margin: 5%" checkboxes="true"
ng-dropdown-multiselect="" options="example1data" selected-model="example1model"></div>
For example:
if model is :
$scope.example1model = [];
$scope.example1data = [ {id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"} ];
Issue:
the binding for options doesn't seems to work correctly as I am getting only Id(s) rest is working fine, if I check David and John ,the options binding with $scope.example1model show only the id not the label
i.e : [{"id":1},{"id":2}
but what I want is
[
{
"id": 1,
"label": "David"
},
{
"id": 2,
"label": "John"
}
]
Set externalIdProp as empty string
$scope.extraSettings = {
externalIdProp: ''
};
html
<div ng-dropdown-multiselect="" options="options" selected-model="myModel" extra-settings="extraSettings"></div>
Works for me, I'm using ^1.11.8
you can try like below.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app ="sortApp" ng-controller ="mainController">
<!DOCTYPE html>
<html lang="eng-US">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<select class="multiselect" data-placeholder="Select Products"
ng-model="example1model" ng-options="item as item.label for item in example1data"
multiple="multiple" multiselect-dropdown >
</select>
{{example1model}}
<div style="margin: 5%" checkboxes="true" ng-dropdown-multiselect="" options="example1data" selected-model="example1model"></div>
</body>
</html>
</div>
<script>
angular.module('sortApp', [])
.controller('mainController', function($scope) {
$scope.example1model = [];
$scope.example1data = [ {id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"} ];
});
</script>
</body>
</html>
In my angularjs application have an array of objects as shown below :
$scope.rowData = [{
"expNum": "678",
"itemHr": "10",
"highRe": "C"
}, {
"expNum": "978",
"itemHr": "3",
"highRe": "Y"
}]
Now on a click event I need to update 'itemHr' of each object in the array to some new value let say (25). I don't want to create new Array of object rather modify the existing only. If we can use angularjs utilities to do it or underscore library, both are fine for me. can any one help me with that.
Why not vanila js with for loop?
for(var i = 0; i<$scope.rowData.length; i++)
{
$scope.rowData[i].itemHr = 25;
}
or underscore
_.each($scope.rowData, function(item){ item.itemHr = 25;});
or angular
angular.forEach($scope.rowData,function(item){ item.itemHr = 25; });
var app = angular.module("myApp", ['ui.bootstrap']);
app.controller("maincontroller", function($scope) {
$scope.rowData = [{
"expNum": "678",
"itemHr": "10",
"highRe": "C"
}, {
"expNum": "978",
"itemHr": "3",
"highRe": "Y"
}];
$scope.update = function(){
for(var i = 0; i<$scope.rowData.length; i++)
{
$scope.rowData[i].itemHr = 25;
}
}
});
<!doctype html>
<html lang="en" ng-app="myApp" ng-controller="maincontroller">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="script.js"></script>
<script data-require="angular-bootstrap#0.12.0" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<table class="table table-hover table-bordered" >
<tbody >
<tr ng-repeat="row in rowData">
<td>
{{row.expNum}}
</td>
<td>
{{row.itemHr}}
</td>
<td>
{{row.highRe}}
</td>
</tr>
</tbody>
</table>
</div>
<input type="button" class="btn btn-danger" ng-click="update()" value="Update ItemHr to 25">
</body>
</html>
angular.forEach($scope.rowData, function(item,index){
item["itemHr"] = "25";
})
I am new to both backbone and marionette.
Here is my current progress.
<!DOCTYPE html>
<html>
<head>
<title>Marionette composite view test</title>
<script src="./assets/libs/jquery.js"></script>
<script src="./assets/libs/bootstrap/js/bootstrap.js"></script>
<script src="./assets/libs/underscore.js"></script>
<script src="./assets/libs/backbone.js"></script>
<script src="./assets/libs/backbone.marionette.js"></script>
<link href="./assets/css/style.css" rel="stylesheet">
</head>
<body>
<div id="content"></div>
<script type="text/template" id="fDD">
<td><%= subtype %></td>
<td><%= acs_code %></td>
</script>
<script type="text/template" id="fD">
<caption><%= name %> ( <%= rollnum %> ), Project Code(<%= projectcode %>)</caption>
<thead>
<tr>
<th> Submission Type </th>
<th> Access number </th>
</tr>
</thead>
<tbody id="sub-Region">
</tbody>
</script>
<script type="text/javascript">
var data = {"name": "Mr XYZ", "rollnum": "53", "projectcode": "3526",
"submissions": [{"subtype": "A5", "acs_code": "5689-64123"},
{"subtype": "A8", "acs_code": "5689-64122"},
{"subtype": "D1", "acs_code": "5689-64122"},
{"subtype": "A5", "acs_code": "5689-64122"}]}
MyApp = new Backbone.Marionette.Application();
MyApp.addRegions({
mainRegion: "#content"
});
Submission = Backbone.Model.extend({});
Submissions = Backbone.Collection.extend({
model: Submission
});
SubmissionInfo = Backbone.Model.extend({});
MainInfo = Backbone.Collection.extend({
model: SubmissionInfo
});
FilingView = Backbone.Marionette.ItemView.extend({
tagName: "tr",
template: "#fDD"
});
TableView = Backbone.Marionette.CompositeView.extend({
tagName: "table",
itemView: FilingView,
template: "#fD",
itemViewContainer: "#sub-Region",
className: "table table-hover table-condensed"
});
AccordionView = Backbone.Marionette.CollectionView.extend({
itemView: TableView
});
MyApp.addInitializer(function(options){
var mainInfo = new MainInfo(options.data);
mainInfo.each(function(iinfo){
var ss = iinfo.get("submissions");
var sss = new Submissions({collection: ss});
iinfo.set("submissions", sss);
});
MyApp.mainRegion.show(new AccordionView({collection: mainInfo}));
});
MyApp.start({data: data});
</script>
</body>
</html>
I want to render a table in which i will show some info in its caption and other details as its rows. But only caption part is rendering while rows are missing. even that is without any error. How to solve this?? any better way to achieve this???
For above code; i am using:
Backbone.js 1.0.0
MarionetteJS v1.0.3
jQuery JavaScript Library v1.9.1
Underscore.js 1.4.4
there are some basic mistakes: how you should initialize a collection, the correct constructors of backbone objects, etc. Below is a working version of your code.
<script type="text/template" id="fDD">
<td><%= subtype %></td>
<td><%= acs_code %></td>
</script>
<script type="text/template" id="fD">
<caption><%= name %> ( <%= rollnum %> ), Project Code(<%= projectcode %>)</caption>
<thead>
<tr>
<th> Submission Type </th>
<th> Access number </th>
</tr>
</thead>
<tbody id="sub-Region">
</tbody>
</script>
<script type="text/javascript">
var data = {"name": "Mr XYZ", "rollnum": "53", "projectcode": "3526",
"submissions": [{"subtype": "A5", "acs_code": "5689-64123"},
{"subtype": "A8", "acs_code": "5689-64122"},
{"subtype": "D1", "acs_code": "5689-64122"},
{"subtype": "A5", "acs_code": "5689-64122"}]};
MyApp = new Backbone.Marionette.Application();
MyApp.addRegions({
mainRegion: "#content"
});
var Submission = Backbone.Model.extend({});
var SubmissionCollection = Backbone.Collection.extend({
model: Submission
});
var Project = Backbone.Model.extend({});
var FilingView = Backbone.Marionette.ItemView.extend({
tagName: "tr",
template: "#fDD"
});
var TableView = Backbone.Marionette.CompositeView.extend({
tagName: "table",
itemView: FilingView,
template: "#fD",
itemViewContainer: "#sub-Region",
className: "table table-hover table-condensed"
});
MyApp.addInitializer(function(options){
var projectInfo = new Project(options.data);
var submissions = new SubmissionCollection(projectInfo.get("submissions"));
MyApp.mainRegion.show(new TableView({model: projectInfo, collection: submissions}));
});
MyApp.start({data: data});
</script>
</body>
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.