Knokout.js и картографирование с привязкой OnClick

Question

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

У меня есть этот HTML часть и HTML внутри диалогового

<a href="#" title="3" class="button color" id="learnmore">Learn More</a> 
    <div id="dialogID" class="learnmore-dialog" title="More Information" style="display:none;"> 
    <h4 data-bind="text: ProgramName"></h4> 
     <strong>Program Objectives</strong>: 
     <span data-bind="text: ProgramObjective"></span> 
     <strong>Program Speaker</strong>: 
     <br><span data-bind="text: Speacker"></span> 
     <br> 
     <br><strong>Program Locations</strong>: 
     <table> 
     <tbody data-bind="foreach: displocation"> 
     <tr> 
     <td><span data-bind="text: Address"></span> 
     <br><span data-bind="text: LocationName"></span> 
     <br><span data-bind="text: City"></span>, <span data-bind="text: State"></span> <span data-bind="text: Zip"></span> 
     </td> 
     <td> 
     <span data-bind="text: ProgramLocationStartDateString"></span>-----<span data-bind="text: ProgramLocationEndDateString"></span> 
     </td> 
      </tr> 
     </tbody></table> 
      </div> 

и я есть сценарий

<script> 
    $("#learnmore").click(function (e) { 
     e.preventDefault(); 
     var winW = $('#main .container').width(); 
     if (winW > 767) 
     winW = winW - 200; 
     var prid = $(this).attr("title") 
     $.getJSON('http://getjson', function (result) { 
      var viewModel = ko.mapping.fromJS(result); 
      ko.applyBindings(viewModel); 
      }) 
     $("#dialogID").dialog({ 
     width: winW, 
      modal: true 
     }); 
    }); 
     </script> 

проблема является, я получаю эту ошибку

Y ou не может применять привязки несколько раз к одному элементу.

, очевидно, потому, что я применяю связывания каждый раз, когда нажата кнопка, так что я могу получить новый JSON будет в любом случае, чтобы решить эту проблему или сделать по-другому Благодаря

Answer 1

Во-первых, с помощью JQuery, таким образом, идет вразрез с Нокаут менталитет, но использование его правильно решает вашу проблему.

<a data-bind="click: showDialog" href="#" title="3" class="button color" id="learnmore">Learn More</a> 

Это если связывание причины KNOCKOUT не оказывать дочерние элементы, если у вас есть данные в формате JSON загружены, и with связывание делает все, что в контексте JSON.

<div data-bind="if: dialgoStuff().ProgramObjective, with: dialogStuff()" id="dialogID" class="learnmore-dialog" title="More Information" style="display:none;"></div> 

Затем вы должны создать ViewModel с наблюдаемым для данных.

function ViewModel() { 
    var self = this; 
    self.dialogStuff = ko.observable({}); 

И разместите здесь свой обработчик кликов. Поскольку вы не изменяете значения данных JSON, за исключением замены его вместе, вам не нужен плагин сопоставления.

self.showDialog = function (data, e) { 
     e.preventDefault(); 
     var winW = $('#main .container').width(); 
     if (winW > 767) winW = winW - 200; 
     var prid = $(this).attr("title") 
     $.getJSON('http://getjson', function (result) { 
      self.dialogStuff(result); 
     }) 
     $("#dialogID").dialog({ 
      width: winW, 
      modal: true 
     }); 
    }); 
} 

ko.applyBindings(new ViewModel());