Я изменил свое мнение о том, как данные выглядят для упрощения шаблонов.Загрузите данные в обычные шаблоны jsView из списка полей, включая параметры списка, даты, текст
У меня есть 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"]
}
};
** мои шаблоны, используя устаревшую Шаблоны | библиотека
<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);
});
}
}
Проблема, которая вызвала этот вопрос, заключалась в том, что я не мог получить значения для загрузки в текстовые поля, чтобы использовать средство выбора даты. Они необъяснимо загрузились вне полей ввода.
Я тогда обнаружил, что код шаблонов устарел уже, поэтому теперь я хочу переместить это в какое-то время, даже если оно еще бета-версия.
Итак, у меня есть несколько вопросов, которые я буду пытаться работать самостоятельно, но, возможно, это поможет кому-то еще в качестве примера, который не очень хорошо описан в примере кода, который я видел до сих пор.
Прежде всего, как мне загрузить параметры в свои поля выбора на основе этих данных. Я не хочу иметь отдельный шаблон для каждого из многочисленных полей в данных, которые имеют опции выбора.
Я не возражаю, если мне нужно в некоторой степени реструктурировать данные, чтобы заставить это работать.
И еще мне нужно сделать цикл самостоятельно, чтобы создать более крупный шаблон, чтобы указать подшаблоны для каждого поля, как раньше, или есть встроенная метафора, которую я могу использовать?