鏈接自定義文本與K.O

這是一個超級簡單的問題，我知道 - 但我不知道！如何創建自定義文本鏈接？鏈接自定義文本與K.O

我希望它說「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>

謝謝！

來源

2013-10-25 Bobandra

請勿在表達式中使用的模型屬性的名稱周圍加引號，因爲它只是作爲文本文本來處理。不要把括號中的名字後，因爲在表達式中，你必須把一個模型屬性作爲一個函數來獲取它的值：

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

來源

2013-10-25 19:18:09 ebohlman

達恩，這似乎並沒有工作.. – Bobandra

它在做什麼？ – ebohlman

我相信有部分代碼，如果共享，將有助於回答你的問題更能迎合你如何使用Knockout的解決方案。

不管怎樣，在代碼中的簡短的回答是如下：

<a data-bind="text: 'Est.' + orderNumber(), attr: { href: '/WrenchScienceWebAdmin/OrderManager/WorkOrderTemp.aspx?orderid=' + orderNumber() }" target="_new"></a>

代碼較長的答案，同一個工作樣品一起，可在這裏jsbin：

http://jsbin.com/ixoJoxu/1/edit

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 爲靈感的約翰爸爸對Pluralsight KnockoutJS課程之一。

來源

2013-10-26 05:52:10 mg1075

鏈接自定義文本與K.O

回答

相關問題