Phân tích để tạo giao diên http://localhost/gulp/#crud/new 1.1
PreviousPhân tích để tạo giao diên http://localhost/gulp/#crud/new 1.0NextPhân tích để tạo giao diên http://localhost/create/#crud/index 2.0
Last updated
Advanced Javascript
Last updated
1.1.1 Để nó chạy router crud/new đã :)
window.APP = window.APP || {};
APP.crudRouter = Backbone.Router.extend({
routes: {
"crud/new": "create"
},
initialize: function () {
Backbone.history.start();
},
create: function () {
console.log('create');
}
});1.1.2 Để làm được kết quả giống như này bạn cần phải thực hiện như sau:
<!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>CRUD BackboneJS PHP MySQL</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>MY CRUD</h1>
</div>
<div class="panel panel-default">
<div class="panel-body" id="primary-content">
<!-- this is content -->
</div>
</div>
</div>
<script type="text/jst" id="formTemplate">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="alert alert-danger fade in" style="display:none;"></div>
<form>
<h2><%= name %></h2>
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" name="name" value="<%= name %>" />
</div>
<div class="form-group">
<label>Email:</label>
<input type="text" class="form-control" name="email" value="<%= email %>" />
</div>
<div class="form-group">
<label>Phone:</label>
<input type="text" class="form-control" name="phone" value="<%= phone %>" />
</div>
<div class="form-group">
<label>Address:</label>
<textarea class="form-control" rows="5" name="address"><%= address %></textarea>
</div>
<div class="form-group">
<label>Active:</label>
<% if(_.isEmpty(active) == true && active == 1) { %>
<input type="checkbox" name="active" value="1" checked>
<% } else { %>
<input type="checkbox" name="active" value="0">
<% } %>
</div>
<button class="save btn btn-large btn-info" type="submit">Save</button>
<a href="#crud/index" class="btn btn-large btn-default">Cancel</a>
</form>
</div>
</div>
</script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/backbone/underscore-min.js"></script>
<script src="assets/backbone/backbone-min.js"></script>
<script src="routers.js"></script>
<script src="models.js"></script>
<script src="helpers.js"></script>
<script src="views/add.js"></script>
<script>
var app = new APP.crudRouter();
</script>
</body>
</html>routers.js
window.APP = window.APP || {};
APP.crudRouter = Backbone.Router.extend({
routes: {
"crud/new": "create"
},
$container: $('#primary-content'),
initialize: function () {
Backbone.history.start();
},
create: function () {
var view = new APP.crudNewView({
model: new APP.crudModel()
});
this.$container.html(view.render().el);
}
});APP.crudModel = Backbone.Model.extend({
defaults: {
name: "Lionel",
address: "Ha Nam",
email: "lionel@gmail.com",
phone: "0914748166",
id: 1,
active: 1
}
});routers.js
window.APP = window.APP || {};
APP.crudRouter = Backbone.Router.extend({
routes: {
"crud/new": "create"
},
$container: $('#primary-content'),
initialize: function () {
Backbone.history.start();
},
create: function () {
var view = new APP.crudNewView({
model: new APP.crudModel()
});
this.$container.html(view.render().el);
}
});views/add.js
APP.crudNewView = Backbone.View.extend({
template: _.template($('#formTemplate').html()),
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
