0

这是一个超级简单的问题,我知道——但我想不通!如何创建带有自定义文本的链接?

我希望它说“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>

谢谢!!!

4

2 回答 2

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,输出

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 。

于 2013-10-26T05:52:10.917 回答
0

不要在表达式中使用的模型属性的名称周围加上引号,因为它只是被视为文字文本。请在名称后加上括号,因为在表达式中,您必须将模型属性视为函数才能获取其值:

attr: { href: '/WrenchScienceWebAdmin/OrderManager/WorkOrderTemp.aspx?orderid=' + 'Est.' + orderNumber()}
于 2013-10-25T19:18:09.363 回答