xml to html 双向数据绑定handlebars 处理
2017-05-27 14:35
381 查看
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);
}
};
$$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);
}
};
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- vue.js基础-处理用户输入与双向数据绑定
- 从一段.html代码说起谈谈AngularJs中的双向数据绑定
- AngularJs中的双向向数据绑定(MVVM)与表单处理相关指令
- 稳扎稳打Silverlight(15) - 2.0数据之一次绑定, 单向绑定, 双向绑定, INotifyPropertyChanged, 数据转换, 数据验证
- ASP.NET 2.0的 GridView中模板列绑定DropDownList的数据处理
- HTML中的数据绑定
- MyGeneration学习笔记(8) ：dOOdad提供的数据绑定、特殊函数和事务处理
- C#1.0控件绑定数据之双向更新
- 稳扎稳打Silverlight(15) - 2.0数据之一次绑定, 单向绑定, 双向绑定, INotifyPropertyChanged, 数据转换, 数据验证
- MyGeneration学习笔记(8) ：dOOdad提供的数据绑定、特殊函数和事务处理
- 关于单向数据绑定和双向数据绑定
- Ajax CascadingDropDown DropDownList 二级联动 再绑定数据 丢失数据 处理
- PEAR::HTML_QuickForm入门[3]--处理表单数据
- .net2.0里的 bind 双向数据绑定 很有用
- 深入ASP.NET数据绑定（中）——数据双向绑定机理
- 一个jdbc的例子（包含sql语句的批处理，事务处理，数据绑定prepare）
- 静态页面HTML绑定动态数据.aspx,用document.write的方法！
- 利用反射实现ASP.NET控件和数据实体之间的双向绑定,并且在客户端自动验证输入的内容是否合法
- 把xml数据绑定到html表格中
- 关于单向数据绑定和双向数据绑定