I need help on my first try with JsViews

Question

I read John PAPA's article on JsRender and used its way of loading external HTML files to initialize templates and now I am trying to use JsViews on top of that but it doesn't work as expected !!

I am trying to build a simple menu inside a UL and binding my template to an array of object. One property of this object is whether the menu is selected or not, which should change the style of the text.

Databinding and rendering works, I have added a button to prove that but the use of the "helpers" don't.

I would like to post my code here so I can get some advice on how I started the usage of JsViews and to understand why my helper function is not called.

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

Thanks for any help, Claude

That is a lot of code to create a repro. Can you narrow down and simplify the problem, and if it still doesn't work, post a small repro? You say your helper function is not getting called. Try to create a much smaller sample that shows that issue... — BorisMoore, May 24 '13 at 18:17

score 0 · Accepted Answer · answered Jun 14 '13 at 04:14

As he has stated, that is a lot of code, and a little out of org to repo. I can tell you this thouhg, the way I nromally implement helper functions for jsViews is like this following snippet:

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

And just call it from the views object directly. I can't setup all of your code to test, so try to make a jfiddle for it, and then I can track your bug right down. I work with jsViews all day with it being about 95% of my companies UI.

I would love to solve this for you, so set up the fiddle, and we can work it out. :) Happy coding.

Thank you for this very kind answer. I spent a few more hours reading tutorials and testing and it now works great. I might come back when I'll be stuck again though... Thank you again. — ClaudeVernier, Jun 18 '13 at 15:48

I need help on my first try with JsViews

1 Answers1