Helper functions in jsviews

Question

I am going through the following examples in JsViews site for buttons http://www.jsviews.com/#link-button. When I modify the code to take an input and display the same in the alertbox on clicking the button, the helper function gets executed onload. Also, instead of on click of the button, the function gets executed when the input value changes. I am guessing since the model value is changed in the view, the function gets called with the updated model value but why is it not working on click of the button. I am quite new to jsviews and not able to understand what is happening. Can anyone tell me what is wrong with my approach. Below is the updated code.

<div id="topLinked">
<input type="text" data-link="test"/>
 <button data-link="{on ~doSomething(test)}">Do something</button>
<input type="button" data-link="{on ~doSomething(test)}" value="Do something" />
           </div>  

  var person = {};

var helpers = {
  doSomething: function(val) {
    alert(val);
  }
}

$.link(true, "#topLinked", person, helpers); // Data-link top-level content

Noneme · Accepted Answer · 2016-09-08T07:21:53.843

1

You made a mistake this: data-link="{on ~doSomething(test)}". Arguments are passed through the one or more spaces like this: data-link="{on ~doSomething test test2 ...}".

I changed the example like this:

html

<div id="result"></div>

<script id="tmpl" type="text/x-jsrender">
  <input type="text" data-link="test" value="Do something" />
  {^{on ~doSomething test}}Do something{{/on}}
  <button data-link="{on ~doSomething test}">Do something</button>
  <input type="button" data-link="{on ~doSomething test}" value="Do something" />
</script>

js

var person = {
    test : "start value"
};

var helpers = {
    doSomething : function (val) {
        alert(val);
        return false;
    }
}

var tmpl = $.templates("#tmpl");
tmpl.link("#result", person, helpers);

example on jsfiddle

edited Sep 08 '16 at 07:21

answered Sep 08 '16 at 07:15

Noneme

816
6
22

Thanks a lot. There are a couple of examples with the wrong syntax in https://www.jsviews.com/#helpers. Is that outdated or that is usage for a different scenaior. – user1776573 Sep 08 '16 at 07:30
@user1776573 It's not a bug, it's a feature! This is correct for _jsrender_ and not quite right for _jsviews_. Just need to know what `~doSomething(test)` performed at the time of template render and `~doSomething test` is done at the suitable event. – Noneme Sep 08 '16 at 07:46

Helper functions in jsviews

1 Answers1