無法訪問durandal中的dom元素

Question

這是一個運行durandal的移動應用程序 在我的html頁面中，我有姓名和圖片。 下面的函數格式我的網頁：當我點擊任何一位作者的名字 感謝您的時間

define(function(){ 
function getAutors(myUrl) { 
    $.ajax({ 
      type: "GET", 
      url: myUrl, 
      data: { numAuthors: 23 }, 
      dataType: "jsonp", 
      success: processArray, 
      error: function (xhr, status, err) { 
       alert("Não conseguimos aceder aos dados"); 
      } 


function processArray(arr) { 
    var out = "" 
    for (var i = 0; i < arr.length; i++) { 
    out +='<div class="col-xs-12 text-center"> <a class="autor" style="color:black" id="' + arr[i].id + '" data-bind=" event {click : btnClick}" ><h4>' + 
     arr[i].name + '</h4></a></div>'; 
    } 
    $("#aqui").html(out) 


} 
return{ 
      activate: function(){}, 
      compositionComplete(){ 
       getAutors(this.myUrl);}, 
      btnClick: function(){ 
        alert('You have clicked this'); 
      } 
     }; 
    }); 
}) 

我btnClick功能不激活！

Answer 1

您的btnClick將永遠不會被調用，因爲您在頁面綁定後創建HTML。你正在發出一個AJAX請求，如果這個請求失敗了，它會調用你的processArray方法，然後它會在你的頁面中創建DOM元素，但是在這個時候，Durandal已經運行了applyBindings和這個新的DOM數據綁定屬性不起作用。 當你使用Knockout時，你必須避免使用jQuery的元素操作，你必須使用MVVM的方式。

要做到這一點，您應該使用淘汰模塊引擎，並使用數據綁定循環遍歷您的observableArray，然後創建所需的html DOM，這裏遵循代碼的修改，使用的foreach數據綁定和observableArray：

define(function(){ 
    var vm = { 
     authors: ko.observableArray(), 
     getAutors: function (myUrl) { 
      $.ajax({ 
       type: "GET", 
       url: myUrl, 
       data: { numAuthors: 23 }, 
       dataType: "jsonp", 
       success: processArray, 
       error: function (xhr, status, err) { 
        alert("Não conseguimos aceder aos dados"); 
       } 
      }); 
     }, 
     processArray: function (arr) { 
      this.authors(arr); 
     }, 
     activate: function() { 
      getAutors(this.myUrl); 
     }, 
     btnClick: function(){ 
      alert('You have clicked this'); 
     } 
    }; 

    return vm; 
}); 

和HTML

<div id="aqui" data-bind="foreach: authors"> 
    <div class="col-xs-12 text-center"> 
     <a class="autor" style="color:black" data-bind="event {click: $root.btnClick}, attr: {id: id}" > 
      <h4></h4> 
     </a> 
    </div> 
</div>