Загрузка данных в общие шаблоны 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"]
    }
};

** мои шаблоны с использованием устаревшей библиотеки шаблонов 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);
        });
    }
}

Проблема, которая вызвала этот вопрос, заключалась в том, что я не мог получить значения для загрузки в текстовые поля для использования выбора даты. Они необъяснимо загрузились вне полей ввода.

Затем я обнаружил, что код шаблонов уже устарел, поэтому теперь я хочу переместить это в какое-то время, даже если оно еще бета-версия.

Поэтому у меня есть несколько вопросов, которые я буду пытаться самостоятельно работать, но, возможно, это поможет кому-то еще в качестве примера, который не очень хорошо описан в примере кода, который я видел до сих пор.

Прежде всего, как я могу загрузить параметры в свои поля выбора на основе этих данных. Я не хочу иметь отдельный шаблон для каждого из многочисленных полей в данных, которые имеют опции выбора.

Я не возражаю, если мне придется в какой-то мере реструктурировать данные, чтобы заставить это работать.

И нужно ли мне все-таки зацикливаться на том, чтобы создать более крупный шаблон, чтобы указать подшаблоны для каждого поля, как это было раньше, или есть встроенная метафора, которую я могу использовать?