JsViews 中的数据绑定
Data-binding in JsViews
我有一个 Javascript 对象文字,例如
test : {
length: 3,
text: "Please enter 3 characters"
}
我想让文本根据长度动态呈现,像这样
test : {
length: 3,
text: "Please enter {{:length}} characters"
}
有没有办法在 JsViews 中实现这个?我查看了 https://github.com/BorisMoore/jsviews/issues/327,但我不确定相同的方法是否适用于我的场景。
你可以尝试制作这样的辅助格式
html
<div id="result"></div>
<script id="tmpl" type="text/x-jsrender">
<input type="text" data-link="length"/>
<br/>
<span> {^{:~format(text, length)}} </span>
</script>
js
var data = {
length : 3,
text : "Please enter {0} characters",
}
var _rxMark = /\{(\d+)\}/g;
var helpers = {
format : function (string) {
var data = [];
for (var _i = 1; _i < arguments.length; _i++) {
data[_i - 1] = arguments[_i];
}
return string.replace(_rxMark, function (substring, argIndex) {
var result = data[parseInt(argIndex)];
return result || "";
});
}
}
var tmpl = $.templates("#tmpl");
tmpl.link("#result", data, helpers);
参见 example。
这里可能对你也有用sample。
我有一个 Javascript 对象文字,例如
test : {
length: 3,
text: "Please enter 3 characters"
}
我想让文本根据长度动态呈现,像这样
test : {
length: 3,
text: "Please enter {{:length}} characters"
}
有没有办法在 JsViews 中实现这个?我查看了 https://github.com/BorisMoore/jsviews/issues/327,但我不确定相同的方法是否适用于我的场景。
你可以尝试制作这样的辅助格式
html
<div id="result"></div>
<script id="tmpl" type="text/x-jsrender">
<input type="text" data-link="length"/>
<br/>
<span> {^{:~format(text, length)}} </span>
</script>
js
var data = {
length : 3,
text : "Please enter {0} characters",
}
var _rxMark = /\{(\d+)\}/g;
var helpers = {
format : function (string) {
var data = [];
for (var _i = 1; _i < arguments.length; _i++) {
data[_i - 1] = arguments[_i];
}
return string.replace(_rxMark, function (substring, argIndex) {
var result = data[parseInt(argIndex)];
return result || "";
});
}
}
var tmpl = $.templates("#tmpl");
tmpl.link("#result", data, helpers);
参见 example。
这里可能对你也有用sample。