Kendo template as a Service

Tình huống từ 1 case thực tế tôi từng gặp: Khi xây dựng web client (1 dạng rich client), tôi dùng kendo template để render data (javascript object) sang Html. Mọi thứ vẫn tốt đến khi đùng 1 cái có thêm 1 cái windows desktop client bằng C# cũng muốn transform data sang Html bằng kendo template. Nhưng kendo template chỉ mới có javascript parser. Khi đó, tôi xử lý adhoc bằng cách cho web client render xong đẩy Html ngược về Server lưu lại, bên windows desktop client chỉ việc query Html đó ra dùng để tránh việc phải build C# parser.

Sau đây là 1 giải pháp khác. Đó là dùng NodeJs viết 1 service tạo DOM ảo, nạp các javascript library lên, trong đó có kendo, sau đó trả kết quả render về. Có thể viết dưới dạng RESTful cho dễ mở rộng hoặc nếu dạng nhúng vào trong .NET luôn thì có thể dùng EdgeJs

Bài viết này xin cung cấp đoạn code mẫu cho kendo template engine as a restful service (cần cài thêm thư viện restify và jsdom):

//server.js
var fs = require('fs');
var restify = require('restify');
var env = require('jsdom').env;
var jquery = fs.readFileSync("jquery-1.12.4.min.js", "utf-8");
var kendo = fs.readFileSync("kendo.core.js", "utf-8");

//mock data
var arrPlayers = {
	'vkhangyang': { 'name': 'Khang Yang', 'hp': 5 },
	'hoainam': { 'name': 'Nam VH', 'hp': 6 },
	'tubui': { 'name': 'Tu BC', 'hp': 4 }
	//...
};

var arrTransforms = {
	'short-profile': fs.readFileSync("short-profile.tmpl.htm", "utf-8"),
	'full-profile': fs.readFileSync("full-profile.tmpl.htm", "utf-8")
};

function respond(req, res, next) {
	var objSinglePlayer = arrPlayers[req.params.code];
	var strTemplate = arrTransforms[req.params.trans];

	if (objSinglePlayer && strTemplate) {
		env({
			html: '',
			src: [jquery, kendo],
			done: function (errors, window) {
				var tmpl = window.kendo.template(strTemplate);
				var str = tmpl(objSinglePlayer);
				res.send(str);
				next();
			}
		});
	} else {
		res.send(new errors.InternalServerError());
		next();
	}
}

var server = restify.createServer();
server.get('/render/:code/:trans', respond);

server.listen(8080, function() {
  console.log('%s listening at %s', server.name, server.url);
});

Giả sử file short-profile.tmpl.htm có nội dung đơn giản như sau:

<h4>#: name + '(' + hp + ')' #</h4>

Chạy server lên và thử truy cập http://localhost:8080/render/vkhangyang/short-profile sẽ có kết quả

"<h4>Khang Yang(5)</h4>"

Đoạn code trên có thể tiếp tục tối ưu để DOM chỉ nên tạo 1 lần. Hy vọng bài viết có ích với các bạn

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất /  Thay đổi )

Google photo

Bạn đang bình luận bằng tài khoản Google Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s