Question

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

感谢您的帮助，克劳德

Answer 1

正如他所说的那样，这是很多代码，而且还有一些代码要求回购。我可以告诉你这个，我为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;
    }
});

直接从views对象中调用它。我无法设置您要测试的所有代码，因此请尝试为其制作一个jfiddle，然后我可以直接跟踪您的错误。我整天都在使用jsViews，因为它占我公司UI的95％左右。

我很乐意为你解决这个问题，所以设置小提琴，我们就可以解决这个问题。 :)快乐的编码。

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

1 个答案: