Knokout.js與結合的onclick

Question

我認爲這個問題可能會問了幾個時間，但我不能找到什麼好的解決辦法

我有這個網站的部分和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> 

問題是我收到此錯誤

ÿ ou不能將綁定多次應用於同一元素。

顯然是因爲我申請綁定每個按鈕被點擊，所以我可以得到一個新的JSON的時間反正是有不同的解決這個問題，或者做 感謝

Answer 1

首先，以這種方式使用jQuery違背了淘汰賽心態，但正確使用它可以解決您的問題。

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

此，如果結合導致淘汰賽，除非你有加載的JSON數據不會使孩子們元素和with結合使得在JSON的來龍去脈。

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

您應該然後創建一個可觀察的數據視圖模型。

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());