Search code examples
javascriptjqueryjsrenderjsviews

JSRender with JSViews event binding with global helper function throws error e.apply is not a function

When I try to do an event binding which calls a global helper function taking in 3 parameters, a TypeError is thrown stating e.apply is not a function. The functionality is not compromised but the html doesn't render properly (hrefs after the call render as plain text).

My simplified code is as follows:

<script type="application/javascript">
$(document).ready(function () {
    $.views.helpers({
        rapidClick: function(chip, petName, owner, ev, eventArgs) {
            console.log('Data for RapidAlert: ' + chip + ', ' + petName + ', ' + ownerCell);
        }
    });
});


<script id="matchTempl" type="text/x-jsrender">
<div class="panel panel-default">
    <div class="panel-heading">

        <h2 class="panel-title"><span class="x-chip" data-link="html{:~diff(chip)}"></span>
        {{if ~token && pet}}
            <div class="pull-right">
                <small style="margin-right: 30px">{{:weight}}&percnt;</small>
                <button class="btn btn-xs btn-danger" data-link="{on 'click' ~rapidClick chip pet.name owner}">Send RapidAlert</button>
            </div>
        {{else}}
            <small class="pull-right" style="margin-right: 10px">{{:weight}}&percnt;</small>
        {{/if}}
        </h2>

    </div>

</div>


<script id="matchTempl" type="text/x-jsrender">
<div class="panel panel-default">
    <div class="panel-heading">

        <h2 class="panel-title"><span class="x-chip" data-link="html{:~diff(chip)}"></span>
        {{if ~token && pet}}
            <div class="pull-right">
                <small style="margin-right: 30px">{{:weight}}&percnt;</small>
                <button class="btn btn-xs btn-danger" data-link="{on 'click' ~rapidClick chip pet.name owner}">Send RapidAlert</button> //If I remove this line, the error is not thrown
            </div>
        {{else}}
            <small class="pull-right" style="margin-right: 10px">{{:weight}}&percnt;</small>
        {{/if}}
        </h2>

    </div>

</div>

This is the stack trace from browser inspect:

TypeError columnNumber: 2959 fileName: "http://cdnjs.cloudflare.com/ajax/libs/jsrender/0.9.84/jsrender.min.js" lineNumber: 3 message: "e.apply is not a function"...

What is causing this?

Solution

  • You are using incompatible versions:

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jsrender/0.9.84/jsrender.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jquery.observable.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jquery.views.min.js"></script>

    Obviously you need to use the same version for each, or just use a single jsviews.js file.

    http://www.jsviews.com/#download

    It might be best to remove this question, as it will likely not be helpful or apply to other people.