CODEWITHSUNDEEP
javascriptjqueryhtmlknockout.js
user1400915
user1400915

Reputation: 1943

Dynamic binding of li items click event

I have durandal and knockout web application. I have a html as follows:

<ul id="header">

</ul>

In .js function I am adding li dynamically as:

$("#header).append('<li id="btn"><a href="javascript://" data-bind="click:function(data,event) { $root.testmethod(data,event); return true;}"> <span class="name">Test</span></a></li>')

ko.applyBindingsToNode(ul);

I am aware of the fact that I am binding the li after applyBindings has been called. To add it dynamically I am using ko.applyBindingsToNode(ul); , but still no luck.

Can anyone please tell me whats the syntax/alternative solution for this?

Upvotes: 1

Views: 558

Answers (4)

user1400915
user1400915

Reputation: 1943

I would like to answer my own question.

The solution is very simple .

In the .js file define an observable array 

self.arraysample = ko.observableArray([]);

In a method populate the array with data

self.arraysample.push(data)

In the html page , we can do this:

<ul id="head" data-bind:"foeach:arraysample">

  <li>
      <a id="btn">
         <span data-bind="text:$data.arrayelement"></span>
      </a>
  </li>
</ul>

Thats it whenevr the data in the "self.arraysample" changes, automatic updating will take place because of knockout js properties.

I hope it helps someone because ,I have seen so many examples in the web advising to use ko.applyBindings() once again which doesnt work at all.

Upvotes: 0

kasperoo
kasperoo

Reputation: 1584

using foreach:

var DemoPage = (function() {
  function DemoPage() {
    var _this = this;
    _this.buttons = ko.observableArray([]);
    _this.debug = ko.observable('');
    _this.testmethod = function(data, event) {
      _this.debug('Clicked LI: ' + data.buttonId);
    }
    _this.addHeadingRow = function() {
      _this.buttons.push({
        buttonId: Math.floor(Math.random() * 100)
      });
    }
  }
  return DemoPage;
})();


var demoApp = new DemoPage();
ko.applyBindings(demoApp);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<ul id="header" data-bind="foreach: buttons">
  <li id="btn">
    <a data-bind="click: $root.testmethod">
      <span class="name">Test</span>
    </a>
  </li>
</ul>

<button data-bind="click: addHeadingRow">add heading row</button>
<p data-bind="text: debug"></p>

Upvotes: 0

Shashank
Shashank

Reputation: 2060

Refer to the demo here.

Please find the code below:

HTML:

<ul id="header">

</ul>

JS:

$(function() {
  $("#header").append('<li id="btn">' + '<a href="javascript://" data-bind="click:function(data,event) { $root.testmethod(data,event); return true;}"> <span class="name">Test</span></a></li>');
  //ko.applyBindingsToNode(ul);
});

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128856

// begins a JavaScript comment. This means that everything after <a href="javascript: is commented out, and the resulting code will look something like this:

$("#header).append('<li id="btn"><a href="javascript:
ko.applyBindingsToNode(ul);

Furthermore, the ko.applyBindingsToNode call will be part of the ' string opened just after the opening brackets on the append call.

To resolve this, you need to escape those comments by placing backslashes before them:

href="javascript:\/\/"

Upvotes: 1

Related Questions