我相信您的代码的某些部分如果共享,将有助于通过更适合您如何使用 Knockout 的解决方案来回答您的问题。
无论如何,代码中的简短答案如下:
<a data-bind="text: 'Est.' + orderNumber(), attr: { href: '/WrenchScienceWebAdmin/OrderManager/WorkOrderTemp.aspx?orderid=' + orderNumber() }" target="_new"></a>
jsbin 上提供了更长的代码答案以及工作示例:
https://jsbin.com/xapibicusa/1/edit?html,js,输出
HTML
<!DOCTYPE html>
<html>
<head>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<h4>sample table</h4>
<table class="table table-condensed">
<thead>
<tr>
<th>EstBookId</th>
<th>Work Order</th>
<th>cust. Editor</th>
<th>cust. FirstName</th>
<th>cust. LastName</th>
<th>salesPerson</th>
<th>Notes</th>
</tr>
</thead>
<tbody> <!-- ko foreach: my.VM.CustomerOrders -->
<tr>
<td><span data-bind="text: estimateBookId"></span></td>
<td><a data-bind="attr: { href: WorkOrderLink }, text: WorkOrderLinkText" target="_blank"></a></td>
<td><a data-bind="attr: { href: CustomerEditorLink }, text: CustomerEditorLinkText" target="_blank"></a></td>
<td><span data-bind="text: customerFirstName"></span></td>
<td><span data-bind="text: customerLastName"></span></td>
<td><span data-bind="text: salesPerson"></span></td>
<td><span data-bind="text: Notes"></span></td>
</tr> <!-- /ko -->
</tbody>
</table>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
</body>
</html>
Javascript
var initialData = [
{ orderNumber: 1, estimateBookId: 1000, customerId: 77, customerFirstName: "John", customerLastName: "Smith", salesPerson: "Danny Boy", Notes: "well done" },
{ orderNumber: 2, estimateBookId: 1001, customerId: 78, customerFirstName: "Billy", customerLastName: "Bones", salesPerson: "Fritz Tomato", Notes: "come on!" },
{ orderNumber: 3, estimateBookId: 1002, customerId: 79, customerFirstName: "Mary", customerLastName: "Anderson", salesPerson: "Jeff Jefferson", Notes: "get going" },
{ orderNumber: 4, estimateBookId: 1003, customerId: 80, customerFirstName: "Donald", customerLastName: "Duck", salesPerson: "Danny Boy", Notes: "do something" },
{ orderNumber: 5, estimateBookId: 1004, customerId: 81, customerFirstName: "Tommy", customerLastName: "John", salesPerson: "Danny Boy", Notes: "go, go, go!" }
];
var my = my || {};
my.CustomerOrder = function () {
var self = this;
self.orderNumber = ko.observable();
self.estimateBookId = ko.observable();
self.customerId = ko.observable();
self.customerFirstName = ko.observable();
self.customerLastName = ko.observable();
self.salesPerson = ko.observable();
self.Notes = ko.observable();
self.WorkOrderLink = ko.computed(function () {
return '/WrenchScienceWebAdmin/OrderManager/WorkOrderTemp.aspx?orderid=' + self.orderNumber();
});
self.WorkOrderLinkText = ko.computed(function () {
return 'Est. ' + self.orderNumber();
});
self.CustomerEditorLink = ko.computed(function () {
return '/WrenchScienceWebAdmin/UserManager/Customer/CustomerEditor.aspx?CustomerID=' + self.customerId();
});
self.CustomerEditorLinkText = ko.computed(function () {
return self.customerFirstName() + ' ' + self.customerLastName();
});
};
my.VM = function () {
var CustomerOrders = ko.observableArray([]),
load_initialData = function( _initialData ) {
// clear array if loading dynamic data
CustomerOrders([]);
$.each( _initialData, function( i, d ) {
CustomerOrders.push( new my.CustomerOrder()
.orderNumber(d.orderNumber)
.estimateBookId(d.estimateBookId)
.customerId(d.customerId)
.customerFirstName(d.customerFirstName)
.customerLastName(d.customerLastName)
.salesPerson(d.salesPerson)
.Notes(d.Notes)
);
});
};
return {
load_initialData: load_initialData,
CustomerOrders: CustomerOrders
};
}();
$(function() {
my.VM.load_initialData( initialData );
ko.applyBindings( my.VM );
});
该代码示例使用
受 John Papa 的 Pluralsight 的 KnockoutJS 课程之一启发的Revealing Module Pattern 。