jsViews - error, while using data-link

Question

I have the following script template:

<script id="template" type="text/x-jsrender">
    <div>
        <label>Name</label>
        <input data-link="FirstName" type="text" />
    </div>


    <button>Search</button>
</script>

I fire jsView with the following command:

$.templates("#template").link("#result", model);

Where model is js object

function myModel() {
    this.FirstName = "";
}

Unfortunately, link command casues error:

TypeError: elem.dispatchEvent is not a function

What could be wrong?

Answer 1

Could it be the way you are constructing your model?

For instance, this doesn't work (fiddle):

function myModel() {
    this.FirstName = "",
}
var model = myModel();
$.templates("#template").link("#result", model);

But this works (fiddle):

var model= {
    FirstName : "",
}

$.templates("#template").link("#result", model);

As does this (fiddle):

function myModel() {
    this.FirstName = "",
}
var model = new myModel(); //<---the new keyword makes the difference
$.templates("#template").link("#result", model);