Question

我已经改变了关于数据如何简化模板的想法。

我有一个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版。

所以我有几个问题，我将尝试独立工作，但也许这会帮助其他人作为一个例子，在我见过的示例代码中没有很好地介绍。

首先，如何根据此数据将选项加载到我的选择框中。我不想为数据中具有选择选项的众多字段中的每个字段设置单独的模板。

我不介意是否必须在某种程度上重构数据才能使其发挥作用。

我还需要自己循环构建一个更大的模板，将子模板指向每个字段，就像我之前做的那样，还是有一个我可以使用的内置隐喻？

Answer 1

有关模板组合，请参阅

如需选择，请参阅http://www.jsviews.com/#samples/form-els/simple等示例，以及我对其他问题的回答：I'm trying to build up options from an array data value using jsView

Answer 2

你刚才为我的另一个问题I'm trying to build up options from an array data value using jsView做出的回答也有助于解决这个问题。

感谢您的快速回复。这也有助于我现在已经做了一段时间了，我开始喜欢这个了。我真的不需要像Angular，Knockout或Backbone这样的完整MVVM，只是为了在一个网站上填写一个模板，该网站的页面由一个复杂的后端彼此独立地提供，到目前为止，这已经很多了。比仅仅为了一个只需要与自己和一些Ajax方法交互的简单页面创建所有不必要的抽象更容易。

从字段列表中将数据加载到常见的jsView模板中，包括列表选项，日期，文本

2 个答案: