我已经改变了对数据看起来如何简化模板的想法。
我在此有一个 jsFiddle：http: //jsfiddle.net/geewhizbang/Y44Gm/4/ 除了选择的项目外，我现在可以正常工作。我还不知道双向绑定是否有效
我的数据看起来大致像这样，只是它更冗长
var allData = [
{
"DateOne": "2011-04-07T00:00:00",
"DateTwo": "2019-03-22T00:00:00",
"TextValue": "Some lengthy block of text",
"AnotherTextValue": "Yadda 2013/003208",
"SelectionBoxValue": "4 - Broad"
}, {
"DateOne": "2013-04-07T00:00:00",
"DateTwo": "2019-03-22T00:00:00",
"TextValue": "Some lengthy block of text like this",
"AnotherTextValue": "Pinko 2013/003208",
"SelectionBoxValue": "3 - Average"
}
];
var config =
{
fieldTitles: {
"DateOne":
"Date One",
"DateTwo":
"Another Date Value",
"TextValue":
"First Text Value",
"AnotherTextValue":
"Some More Text Here",
"SelectionBoxValue":
"Select Something"
},
fieldList: ['TextValue', 'DateTwo', 'SelectionBoxValue', 'AnotherTextValue'],
fieldOptions:
{
"SelectionBoxValue":
["[Not Specified]", "1 - Very narrow", "2 - Narrow", "3 - Average", "4 - Broad", "5 - Very broad"]
}
};
** 我的模板使用已弃用的 jquery 模板库
<script id="TextTemplate" type="text/html">
<div class="bodyItem">
<div class="colDec">
<p data-content="title" data-format="getTitle"></p>
<div data-content="decision" contenteditable="true"></div>
</div>
<div class="colHist">
<p data-content="title"></p>
<div data-content="history"></div>
</div>
</div>
</script>
<script id="DateTemplate" type="text/html">
<div class="bodyItem">
<div class="colDec">
<p data-content="title" data-format="getTitle"></p>
<input data-content="decision" type="text" class="date" data-format="date" />
</div>
<div class="colHist">
<p data-content="title"></p>
<div data-content="history" class="date" data-format="date"></div>
</div>
</div>
</script>
<script id="SelectTemplate" type="text/html">
<div class="bodyItem">
<div class="colDec">
<p data-content="title"></p>
<select data-content="decision" data-options="options" data-format="fixNull"></select>
</div>
<div class="colHist">
<p data-content="title"></p>
<div data-content="history" data-format="fixNull"></div>
</div>
</div>
</script>
我之前使用 jQuery 模板的代码：
var dataIndex = 0;
$bodyTemplate = null;
function fillBody() {
var $SummaryBody = $("#SummaryBody");
var data = {
decision: allData[dataIndex],
history: allData[dataIndex + 1],
options: config.fieldOptions,
title: config.fieldTitles
};
if ($bodyTemplate == null) {
$.addTemplateFormatter({
fixNull: function (value) {
return (value == null ? "[Not Defined]" : value);
},
date: function (value) {
if (value == null) return "";
var d = new Date(value);
return d.getFullYear() == 1900 ? "" : d.getMonth() + "/" + d.getDate() + "/" + d.getFullYear();
}
});
$bodyTemplate = $("<div>");
var textTemplate = $.trim($('#SummaryTextTemplate').html());
var dateTemplate = $.trim($('#SummaryDateTemplate').html());
var selectTemplate = $.trim($('#SummarySelectTemplate').html());
config.fieldList.forEach(function (field) {
var sel = config.fieldOptions[field];
var $template = $("<div />");
if (typeof sel != "undefined") {
$template.html(selectTemplate);
setDataAttrib($template, "data-options", field);
} else {
$template = $template.html((field.indexOf("Date") > -1 ? dateTemplate : textTemplate));
}
setDataAttrib($template, 'data-content', field);
setDataAttrib($template, 'data-content-bind', field);
$bodyTemplate.append($template.children());
});
}
$SummaryBody.loadTemplate($bodyTemplate, data);
$SummaryBody.find(".colDec .date").datepicker();
function setDataAttrib($template, attr, field) {
var $items = $template.find("[" + attr + "]");
$items.each(function () {
var $this = $(this);
var attrValue = $this.attr(attr);
$this.attr(attr, attrValue + "." + field);
});
}
}
引发这个问题的问题是我无法将值加载到文本框中以使用日期选择器。他们会莫名其妙地加载到输入框之外。
然后我发现模板代码已经被弃用了，所以现在我想把它移到即使它仍然是 beta 也不是的东西。
所以我有几个问题，我将尝试独立解决，但也许这将有助于其他人作为我迄今为止看到的示例代码中没有很好地涵盖的示例。
首先，如何根据这些数据将选项加载到我的选择框中。我不想为数据中具有选择选项的众多字段中的每一个设置单独的模板。
我不介意是否必须在某种程度上重组数据才能使其正常工作。
我是否还需要自己循环构建一个更大的模板以将子模板指向每个字段，就像我之前所做的那样，或者是否有一个我可以使用的内置隐喻？