使用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>