Question

我有durandal和knockout web应用程序。我有一个html如下：

<ul id="header">

</ul>

在.js函数中，我动态地添加li：

$("#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);

我知道在调用applyBindings后我绑定了li的事实。要动态添加它我正在使用 ko.applyBindingsToNode（UL）; ，但仍然没有运气。

任何人都可以告诉我这是什么语法/替代解决方案？

Answer 1

//开始JavaScript评论。这意味着<a href="javascript:之后的所有内容都被注释掉了，结果代码看起来像这样：

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

此外，ko.applyBindingsToNode来电将成为'来电后的append字符串的一部分。

要解决此问题，您需要通过在它们之前放置反斜杠来转义这些注释：

href="javascript:\/\/"

Answer 2

请参阅演示here。

请找到以下代码：

<强> 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);
});

Answer 3

使用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>

Answer 4

我想回答我自己的问题。

解决方案非常简单。

在 .js 文件中定义一个可观察数组

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

在方法中使用数据填充数组

self.arraysample.push(data)

在html页面中，我们可以这样做：

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

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

这就是＆＃34; self.arraysample ＆＃34;中的数据。由于 knockout js 属性，将会发生更改，自动更新。

我希望它对某人有所帮助，因为我在网上看到了很多例子，建议再次使用ko.applyBindings（），这根本不起作用。

li项目点击事件的动态绑定

4 个答案: