CODEWITHSUNDEEP
javascriptbackbone.jsunderscore.js
user2686922
user2686922

Reputation:

Call a function inside an underscore template using backbone

Just a thing I try to do that would really simplify my life right now.

How can I do that :

This is my view in app file

    window.ArtView = Backbone.View.extend({
        template:_.template($('#art').html()),
        render:function (eventName) {
            var output="blablbla";
            $(this.el).html(this.template({"output":output}));
            return this;
        }
    });
    ...
    // function that I would like to call
    function callFunction(){
        console.log('it works!');
    }

Template in index.html

<script type="text/tempate" id="art">
        <div data-role="header" class="header" data-position="fixed">
            <a href="#" data-icon="back" class="back ui-btn-left">Back</a>
        </div>
        <div data-role="content" class="content">
            callFunction();
            <% console.log(output) %>
        </div>
</script>

How can I call callFunction() inside my template or something alike ?

Any idea ?

Thanks !

Upvotes: 14

Views: 14811

Answers (3)

Yazan Rawashdeh
Yazan Rawashdeh

Reputation: 1041

this is how I did it , it works fine.

template: _.template(templateText , {
            imports : {
                check :function (val){
                    // blah blah
                    }
                }
            }
        }),

then in your html template

<%= check('value') %>

Upvotes: 6

Vic
Vic

Reputation: 8961

I believe you can call functions within the template as long as the object for the template has the function.

render:function (eventName) {
    var output="blablbla";
    var data = _.extend({"output":output}, callFunction);
    $(this.el).html(this.template(data));
    return this;
}

then in your template:

<%= callFunction() %>

Upvotes: 16

Krasimir
Krasimir

Reputation: 13529

That's wrong. Think about the template as a string, html markup. You get it and replace some parts of it with the actual data. If you want to do some DOM manipulation they should be made after that. Let us know what you want to do in callFunction and we may guide you to the right place for that logic.

Upvotes: 0

Related Questions