Passing parameter through click event in data-bind.

4 posts, 0 answers
  1. RodEsp
    RodEsp avatar
    31 posts
    Member since:
    Sep 2012

    Posted 19 Jun 2012 Link to this post

    I have something like this:
    <div id="view1" data-role="view" data-model="viewModel" data-title="view1">
        <ul id="listview" data-bind="source: dataSource, click: foo" data-role="listview" data-template="template"></ul>
    </div>
      
    <script type="text/x-kendo-template" id="template">
        <a>${link}</a>
    </script>

    And on a separate js file:
    var viewModel = kendo.observable ({
        foo: function (parameter) {
            //use parameter
        }
    });

    I want to know if there is any way to pass a parameter to foo through the click event in bind-data.
  2. RodEsp
    RodEsp avatar
    31 posts
    Member since:
    Sep 2012

    Posted 19 Jun 2012 Link to this post

    Nevermind. I solved this issue in another manner.
  3. Saravanakkumar
    Saravanakkumar avatar
    1 posts
    Member since:
    Jun 2013

    Posted 22 Jun 2013 Link to this post

    Can you please let me know how did you solve it? I am running into the same issue.
  4. leniency
    leniency avatar
    10 posts
    Member since:
    Jan 2012

    Posted 31 Jul 2013 Link to this post

    Agreed, would like to see how the OP solved this.

    One possibility is that click bindings do pass in the event, with a link back to the target.
    <button data-bind="click: submit" data-parameter="foo">Submit</button>
      
    submit: function (e) {
      var param = $(e.target).data('parameter');
    }
    Other bindings though don't send parameters though, or just the model. In calculated fields, the target element isn't available, at least that I've been able to find, and no parameters get passed. You can work around this with a custom binding.
    For example, here's one that will watch a collection on the model and trigger if it contains a particular element.
    <div data-bind="contains: requiredFields" data-value="Foo">...</div>
    <div data-bind="contains: requiredFields" data-value="Bar">...</div>

    // Checks that the bound collection contains a value
    // specified in the element's data-value attribute.
     kendo.data.binders.contains = kendo.data.Binder.extend({
      refresh: function () {
        var values = this.bindings['contains'].get() || [];
        var value = $(this.element).data('value');
                 
        // Only if both there's a collection and search set.
        if (values && value) {
     
          // If the value exists, show the element. Otherwise hide it.
          if ($.inArray(value, values) != -1) {
            $(this.element).show();
          } else {
            $(this.element).hide();
          }
        }
      }
    });
     
    // Simple model
    model = kendo.observable({
      requiredFields: []
    });
Back to Top