使用window.open與淘汰賽綁定

Question

我正在使用淘汰賽的foreach循環獲取數組中的值並將其顯示在href標記中。

這一切都很好，但一旦我使用javascript的onclick（我需要這個onclick，因爲我使用InAppBrowser插件的手機），並使用其中的變量，它不起作用。看到這裏例如：

<div data-bind="foreach: consumerData" style="margin-bottom:100px;"> 
<table> 
<tr> 
<td colspan="2"> 
<p style="font-size:larger; margin-bottom:5px;"> 
<a style="text-decoration:none;" 
data-bind="attr: { href: 'http://domain:8080/dsservlet/'+$data[0]+'.png?key=DK188961' }, 
text: $data[1]" target="_blank" 
onclick="window.open('http://domain:8080/dsservlet/'+$data[0]+'.png?key=DK188961', 
'_blank', 'location=yes'); return false;"></a></p> 
</td></tr> 
</table> 
</div> 

正如你可以看到$data[0]工作正常，數據綁定屬性中。但在onclick中使用相同的$data[0]不起作用，它仍然在foreach循環中。我假設我需要聲明一個JavaScript變量才能使其工作，但我如何在foreach循環中聲明它？我需要在foreach循環中聲明它，因爲數組隨着不同的值而變化。

見javscript部分在這裏：

var ViewModel = function() { 
    this.consumerData = ko.observableArray([[174302,"BUSINESS - APPLICATION TO CONDUCT A BUSINESS FROM HOME.pdf",".pdf","DK89639"],[120183,"Glovent-Brochure.pdf",".pdf","DK472894"]]); 
} 

ko.applyBindings(new ViewModel()); 

Answer 1

隨着淘汰賽有一個different way to handle onclick: use a click binding handler。就像這樣：

var ViewModel = function() { 
    var self = this; 

    this.consumerData = ko.observableArray([[174302,"BUSINESS - APPLICATION TO CONDUCT A BUSINESS FROM HOME.pdf",".pdf","DK89639"],[120183,"Glovent-Brochure.pdf",".pdf","DK472894"]]); 

    this.openServlet = function(data) { 
     window.open('http://domain:8080/dsservlet/'+data[0]+'.png?key=DK188961', '_blank', 'location=yes'); 
    }; 
}; 

ko.applyBindings(new ViewModel()); 

<a data-bind="attr: { href: 'http://domain:8080/dsservlet/'+$data[0]+'.png?key=DK188961' }, 
       click: $parent.openServlet 
       text: $data[1]" 
    target="_blank"></a> 

請仔細閱讀鏈接文件，它就會有答案可能產生的許多後續問題。

最後，考慮將consumerData轉換爲合適的子視圖模型，而不是原始數據陣列。這將允許您創建可觀察或可計算的可觀察值中的href，因此也允許您對其進行單元測試。

作爲一個註腳，如果你真的需要有一個onclick你可以把它用attr結合還用於href設置。因此，例如：

var ConsumerData = function(data) { 
 
    var self = this; 
 

 
    self.id = data[0]; 
 
    self.filename = data[1]; 
 
    self.extension = data[2]; 
 
    self.code = data[3]; 
 

 
    self.url = 'http://domain:8080/dsservlet/' + self.id + '.png?key=DK188961'; 
 

 
    self.openServlet = function() { 
 
    window.open(self.url, '_blank', 'location=yes'); 
 
    }; 
 

 
    self.onclickValue = "window.open('http://domain:8080/dsservlet/'+data[0]+'.png?key=DK188961', '_blank', 'location=yes'); return false"; 
 

 
    // Overwrite them again for testing on StackOverflow (window.open is crap for testing) 
 
    self.openServlet = function() { alert(self.url); }; 
 
    self.onclickValue = "alert('" + self.url + "'); return false;"; 
 
}; 
 

 
var ViewModel = function() { 
 
    this.consumers = ko.observableArray([ 
 
    new ConsumerData([174302, "BUSINESS - APPLICATION TO CONDUCT A BUSINESS FROM HOME.pdf", ".pdf", "DK89639"]), 
 
    new ConsumerData([120183, "Glovent-Brochure.pdf", ".pdf", "DK472894"]) 
 
    ]); 
 
}; 
 

 
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 

 
<div data-bind="foreach: consumers"> 
 
    <p> 
 
    <a data-bind="attr: { href: url, onclick: onclickValue }, click: openServlet, text: filename" target="_blank"></a> 
 
    </p> 
 
</div>