0

我阅读了 John PAPA 关于 JsRender 的文章，并使用其加载外部 HTML 文件的方式来初始化模板，现在我正尝试在此基础上使用 JsViews，但它没有按预期工作！

我正在尝试在 UL 中构建一个简单的菜单并将我的模板绑定到一个对象数组。这个对象的一个​​属性是菜单是否被选中，它应该改变文本的样式。

数据绑定和渲染工作，我添加了一个按钮来证明，但使用“助手”没有。

我想在这里发布我的代码，以便我可以获得一些关于如何开始使用 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 实现辅助函数的方式如下所示：

$.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 回答