1
votes

In my application I'm binding data from an API to a ul successfully. However, I'm unable to have KO call the function bound to the click event of an a tag. I got below error:

Uncaught Error: Unable to parse bindings.
Message: ReferenceError: loadContact is not defined;
Bindings value: click: loadContact,attr: { title: 1}

View code:

<ul data-role="listview" id="ListSss" data-divider-theme="b" data-inset="true">
     <li data-role="list-divider" role="heading">
          Criteria Selected
      </li>
      <!-- ko foreach: Contacts  -->
      <li data-theme="c"> 
          <a href="#" data-transition="slide" data-bind="click: loadsss,attr: { title: sss }">
              <span data-bind="text: FName + ' ' + LName + ' (' + Classifiy +':'+ Position+ ')'" ></span>
          </a>
      </li>
    <!-- /ko -->
</ul>

JS code:

  self.loadsss = function () {
       alert("hi");
    }

Because of href link present in foreach thats why I'm unable to fire click event of href? Where did I make a mistake?

1
Can you add the viewmodel ?Damien
You're probably making the mistake in a bit of code that you haven't posted. The code you posted (when extended to make an sscce) will work just fine.Jeroen

1 Answers

2
votes

Problem is that, loadContact function is used inside for-loop, but loadContact function is a part of viewModel, not a part of single contact.
Use $parent.loadContact instead.

  <a href="#" data-transition="slide" data-bind="click: $parent.loadContact,attr: { title: ContactID }">
      <span data-bind="text: FirstName + ' ' + LastName + ' (' + Classification +':'+ Position+ ')'" ></span>
  </a>

JSFiddle DEMO