0

テンプレートを単純化するために、データがどのように見えるかについて考えを変えました。

http://jsfiddle.net/geewhizbang/Y44Gm/4/にjsFiddle が あります。選択項目を除いて、これが機能するようになりました。双方向バインディングが機能するかどうかはまだわかりません

私のデータはおおよそこのように見えますが、それははるかに冗長です

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);
        });
    }
}

この質問を引き起こした問題は、日付ピッカーを使用するためにテキスト ボックスに値を読み込むことができなかったことです。それらは入力ボックスの外側に不可解にロードされます。

その後、テンプレート コードが既に非推奨になっていることがわかったので、これをまだベータ版であってもそうではないものに移動したいと考えています。

いくつかの質問がありますが、個別に取り組もうとしていますが、これは、これまでに見たサンプル コードではうまくカバーされていない例として、他の人に役立つかもしれません。

まず、このデータに基づいて選択ボックスにオプションをロードするにはどうすればよいですか。選択オプションを持つデータ内の多数のフィールドごとに個別のテンプレートを用意したくありません。

これを機能させるためにデータをある程度再構築する必要があるかどうかは気にしません。

また、以前のようにサブテンプレートを各フィールドにポイントするために、より大きなテンプレートを構築するために自分でループする必要がありますか?それとも、使用できる組み込みのメタファーはありますか?

4

2 に答える 2

0

テンプレートの構成については、を参照してください。

選択については、http://www.jsviews.com/#samples/form-els/simpleなどの例と、他の質問に対する私の回答を参照してください: jsView を使用して配列データ値からオプションを構築しようとしています

于 2013-12-02T00:00:41.743 に答える
0

jsViewを使用して配列データ値からオプションを構築しようとしている私の他の質問に対するあなたの答えは、これにも役立ちます。

迅速な返信ありがとうございます。また、私がこれにしばらく取り組んでいて、これがとても好きになり始めていることも役立ちます. Angular、Knockout、または Backbone のような本格的な MVVM は、複雑なバックエンドによって互いに独立して提供されるページを持つサイトのテンプレートに入力するためだけに必要ではありません。それ自体といくつかの Ajax メソッドと対話するだけでよい単純なページのためだけに不要な抽象化をすべて作成するよりも簡単です。

于 2013-12-02T04:42:51.933 に答える