Question

这是一个非常简单的问题，我知道 - 但我无法弄明白！如何创建包含自定义文本的链接？

我希望它说“Est。（和订单号）”作为链接。

 <tr>
        <td class = "hiddenId"><span data-bind="text: estimateBookId"/></td>
        **<td><a data-bind="text: orderNumber, attr: { href: '/WrenchScienceWebAdmin/OrderManager/WorkOrderTemp.aspx?orderid=' + 'Est.' + 'orderNumber' }" target="_new"></a></td>**
        <td><span data-bind="text: createDate" /></td>
        <td><a data-bind="text: customerName, attr: { href: '/WrenchScienceWebAdmin/UserManager/Customer/CustomerEditor.aspx?CustomerID=' + 'customerName'}" target="_new"></a></td>
        <td><span data-bind="text: customerFirstName" /></td>
        <td><span data-bind="text: customerLastName" /></td>
        <td><span data-bind="text: salesPerson" /></td>
        <td><span data-bind="text: Notes" /></td>
   </tr>

谢谢!!!

Answer 1

我相信您的代码中有一些部分，如果共享，将有助于回答您的问题，解决方案更适合您如何使用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,output

<强> 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 );
});

代码示例使用Revealing Module Pattern 受到John Papa的Pluralsight的KnockoutJS课程的启发。

Answer 2

不要在表达式中使用的模型属性的名称周围加引号，因为它只是作为文字文本处理。将parens放在名称后面，因为在表达式中，您必须将模型属性视为函数来获取其值：

attr: { href: '/WrenchScienceWebAdmin/OrderManager/WorkOrderTemp.aspx?orderid=' + 'Est.' + orderNumber()}

使用K.O链接自定义文本

2 个答案: