0

JsRenderに関するJohn PAPAの記事を読み、外部HTMLファイルをロードしてテンプレートを初期化する方法を使用しましたが、その上でJsViewsを使用しようとしていますが、期待どおりに機能しません!!

UL 内に単純なメニューを作成し、テンプレートをオブジェクトの配列にバインドしようとしています。このオブジェクトの 1 つのプロパティは、メニューが選択されているかどうかであり、テキストのスタイルを変更する必要があります。

データバインディングとレンダリングは機能します。それを証明するボタンを追加しましたが、「ヘルパー」の使用は機能しません。

JsViews の使用を開始した方法についてアドバイスを得て、ヘルパー関数が呼び出されない理由を理解できるように、コードをここに投稿したいと思います。

Content of file: Default.htm

    <html lang="en">
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />

            <style>
                .menu{  color: Blue; }
                .hover{ color: Red; }
            </style>
            <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
            <script src="Scripts/js/jsrender.js" type="text/javascript"></script>
            <script src="Scripts/js/jquery.observable.js" type="text/javascript"></script>
            <script src="Scripts/js/jquery.views.js" type="text/javascript"></script>

            <script src="Scripts/my/my.model.js" type="text/javascript"></script>
            <script src="Scripts/my/my.template.js" type="text/javascript"></script>

            <script type="text/javascript">
                $(document).ready(function () {
                    my.template.loadMenuItemTemplate(onMenuItemAdded);
                });

                function onMenuItemAdded() {
                    $.link.menuItemTemplate
                    (
                        $("#lstMenu"),
                        my.model.menuItems
                    );
                }

                function Tests() {
                    my.model.menuItems.push(
                        {
                            id: 4,
                            label: "New",
                            selected: false
                        }
                    );
                    $.link.menuItemTemplate
                    (
                        $("#lstMenu"),
                        my.model.menuItems
                    );
                }
            </script>
        </head>
        <body>
            <ul id="lstMenu" class="menu"></ul>
            <button id="test" value="test" onclick="javascript:Tests();">Test !</button>
        </body>
    </html>

Content of file: _menuItem.tmpl.html


    <li data-link="class{:~setClassName()}"><span>{{>label}}</span></li>



Content of file: my.model.js


var my = my || {}; //my namespace

my.model = (function () {
    var _menuItems =
        [
            {
                id: 1,
                label: "Applications",
                selected: false
            },
            {
            id: 2,
            label: "Contacts",
            selected: true
            },
            {
            id: 3,
            label: "Environment",
            selected: false
            }
    ];
    return {
        menuItems: _menuItems
    };
})();


Content of file: my.template.js



var my = my || {};

my.template = (function () {
    var loadMenuItemTemplate = function (callback) {
        if (!($.templates.menuItemTemplate)) {
            var file = getTemplateFile("menuItem");

            $.when($.get(file))
            .done(function (tmplData) {
                $.templates(
                    { 
                        "menuItemTemplate": tmplData,
                        helpers: { setClassName: my.template.setClassName }
                    }
                );

                if (callback != null)
                    callback();
            });
        }
    },
    getTemplateFile = function (name) {
        return "../templates/_" + name + ".tmpl.html";
    },
    setClassName = function () {
        return (this.selected) ? "menu hover" : "menu";
    };
    return {
        getTemplateFile: getTemplateFile,
        setClassName: setClassName,
        loadMenuItemTemplate: loadMenuItemTemplate
    };
})();

助けてくれてありがとう、クロード

4

1 に答える 1

0

彼が述べたように、それは大量のコードであり、レポするには組織から少し外れています。私はあなたにこれを伝えることができます.jsViewsのヘルパー関数をnromally実装する方法は、次のスニペットのようなものです:

$.views.helpers({
    onAfterChange: function (ev)
    {                  
        if (ev.type == "change")
        {
            ProcessUpdatedView(this);
        }
    },      
    Testing: function (fromResponseListFlyout, length, index)
    {
        return fromResponseListFlyout + length + index;
    },
    matchCurrentLanguage: function (languageID)
    {
        return languageID == PageSettings.activeSurveyLanguage.LanguageID ? true : false;
    }
});

ビューオブジェクトから直接呼び出すだけです。すべてのコードをテスト用にセットアップすることはできません。そのための jfiddle を作成してみてください。そうすれば、バグを追跡できます。私は一日中 jsViews を使用しており、会社の UI の約 95% を使用しています。

これを解決したいので、フィドルを設定してください。解決できます。:) 幸せなコーディング。

于 2013-06-14T04:14:28.713 に答える