Динамическое связывание элементов li click click

Question

У меня есть durandal и нокаут веб-приложения. У меня есть HTML следующим образом:

<ul id="header"> 

</ul> 

В .js функции Я добавляю Ли динамически:

$("#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 был назван , Чтобы добавить его динамически, я использую ko.applyBindingsToNode (ul); , но все равно не повезло.

Может кто-нибудь, пожалуйста, скажите мне, какой синтаксис/альтернативное решение для этого?

Answer 1

Я хотел бы ответить на мой собственный вопрос.

Решение очень простое.

В .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> 

Thats it whenevr данные в "self.arraysample" изменения, автоматическое обновление будет происходить из-за нокаутом js объектов недвижимости.

Я надеюсь, что это поможет кому-то, потому что я видел так много примеров в Интернете, которые советуют снова использовать ko.applyBindings(), который вообще не работает.

Answer 2

// начинает комментарий JavaScript. Это означает, что весь после того, как <a href="javascript: закомментировано, и полученный код будет выглядеть примерно так:

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

Кроме того, ko.applyBindingsToNode вызова будет частью ' строки открыт только после открытия скобки на append вызова.

Чтобы решить эту проблему, необходимо, чтобы избежать этих замечаний, поставив перед ними обратную косую черту:

href="javascript:\/\/" 

Answer 3

Обратитесь к демо 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 4

с помощью Еогеасп:

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>