我第一次尝试使用 JsViews 时需要帮助答案

【问题标题】：I need help on my first try with JsViews我第一次尝试使用 JsViews 时需要帮助
【发布时间】：2013-05-22 22:51:31
【问题描述】：

我阅读了 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
    };
})();

感谢您的帮助，克劳德

【问题讨论】：

创建repro的代码很多。您能否缩小范围并简化问题，如果仍然无法解决问题，请发布一个小重现？你说你的辅助函数没有被调用。尝试创建一个更小的样本来显示该问题...

标签： jsrender jsviews

【解决方案1】：

正如他所说，这是很多代码，并且有点超出组织范围来回购。我可以告诉你，我通常为 jsViews 实现辅助函数的方式如下 sn-p：

$.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%。

我很想为你解决这个问题，所以设置小提琴，我们可以解决它。 :) 编码愉快。

【讨论】：

感谢您的友好回答。我又花了几个小时阅读教程和测试，现在效果很好。不过，当我再次被卡住时，我可能会回来......再次感谢您。