xml to html 双向数据绑定handlebars 处理

来源：互联网发布：linux find 模糊查询编辑：程序博客网时间：2024/05/07 13:34

var XML2HTML= {
$$bufferDom: $('<div id="_printDom"></div>'),
$$curDom: null,
loadTemplate: function(tempDom) {

//XML转HTML样式相关处理
tempDom = $('<receipt cspace="0" rspace="0"> <line ><segment><info name="left"></info><align>LEFT</align><size>NORMAL</size>' +
'</segment>' + '<segment><info name="middle"></info><align>CENTER</align><size>NORMAL</size></segment>' +
'<segment><info name="right"></info><align>RIGHT</align><size>NORMAL</size></segment>' +
'</line><logo type="WBMP" name="logo1" />' + '</receipt>')
this.$$curDom = tempDom;
//handle align size
console.log("------length:" + this.$$curDom.find("line segment").length);
var segmentLength = this.$$curDom.find("line segment").length;
var segmentWidth = 100 / segmentLength;
this.$$curDom.find("line segment").css({
"width": segmentWidth + "" + "%",
"height": "100%",
"display": "inline-block"
})
this.$$curDom.find("line segment").children('align').each(function() {
console.log("-------:" + $(this).text());
if ($(this).text() === "RIGHT") {
$(this).parent().css({
"text-align": "right"
})
} else if ($(this).text() === "LEFT") {
$(this).parent().css({
"text-align": "left"
})
} else if ($(this).text() === "CENTER") {
$(this).parent().css({
"text-align": "center"
})
}

if ($(this).text() === "BIG") {
$(this).parent().css({
"font-size": "20px"
})
} else if ($(this).text() === "SMALL") {
$(this).parent().css({
"font-size": "10px"
})
} else {
$(this).parent().css({
"font-size": "15px"
})
}

}, this);

var img = $("<img style='display:inline-block'>");
this.$$curDom.find("logo").append(img);
this.$$curDom.find("logo").css({
"text-align": "center",
"width": "100%",
"display": "block"
})
console.log("---------------------- 1:", this.$$curDom)
},
setInfo: function(name, value) {
$("info[name='" + name + "']", this.$$curDom).text(value);
console.log("---------------------- 2:", this.$$curDom)
},
setLogo: function(logoName, logoFile, logoType) {
$("logo[name='" + logoName + "']", this.$$curDom).find('img').attr("src", logoFile);
console.log("---------------------- 3:", this.$$curDom)
},
printText: function(text) {
this.$$bufferDom.append($("<recept style='display:block'>" + text + "</recept>"));
},
printImage: function(imageType, imageFile) {
this.$$bufferDom.append($("<img src='" + imageFile + "'>"));
},
feedPaper: function(direction, lines) {
this.$$bufferDom.append();
},
setFont: function(fontClass, charset, width, height, bold, italic) {

},
print: function() {
this.$$bufferDom.append(this.$$curDom[0].outerHTML);
console.log("---------------------- 5:", this.$$curDom[0].outerHTML)
console.log("---------------------- 4:", this.$$bufferDom[0].outerHTML)
},
start: function() {

//handlebars 数据双向绑定的处理
var self = this;
var tpl = "<html>" + '<head><meta charset = "UTF-8" ><title>Document</title>' +
'<style scoped>*{margin: 0;padding: 0;border: 0;}' +
'line {height:30px ;line-height:100% ;width:100%;background:#fff;display:block;}' +
'align,size {display:none;}</style>' + '</head>' +
'<body><div id="printDom">{{{printDom}}}</div></body ></html>';

var template = Handlebars.compile(tpl);
console.log("--------------1212:", self.$$bufferDom)
var _bufferDomHtml = self.$$bufferDom[0].outerHTML;
console.log("--------------1213:", _bufferDomHtml)
var context = {
printDom: _bufferDomHtml
};
var sHtml = template(context);
// html to bitmp

console.log("------:", sHtml);

}
};

阅读全文

0 0