使用Knockout.js

Question

我正在尝试使用knockout.js显示SharePoint文档库的详细信息。我想要项目的名称或URL是可点击的。这可能吗？我正在尝试下面的代码，但它没有格式化为URL链接<a hrefr=# data-bind="attr: {href: Designation}, text:Designation"></a>

以下是源代码

 <table id="tblEmployeeList" border="1">  
    <thead>  
        <tr>  
            <th>Name</th>  
            <th>Designation</th>  
            <th>Department</th>  
            <th>Location</th>  
        </tr>  
    </thead>  
    <!-- Iterating through every list item using foreach of KO -->  
    <tbody data-bind="foreach: Employees">  
        <tr>  
            <td data-bind="text: Name"></td>  
            **<td <a href="#" data-bind="attr: { href: Designation}, text: Designation"></a></td>**  
            <td data-bind="text: Department"></td>  
            <td data-bind="text: Location"></td>  
        </tr>  
    </tbody>  
</table>  

的Javascript

    ExecuteOrDelayUntilScriptLoaded(MainFunction, "sp.js");  
var completeEmployeeList = null;  

// Class used for saving the field values.  
function EmployeeList(name, designation, department, location) {  
    var self = this;  
    self.Name = name;  
    self.Designation = designation;  
    self.Department = department;  
    self.Location = location;  
}  

//  View Model - JavaScript that defines the data and behavior of your UI  
function EmployeeListViewModel() {  
    var self = this;  
    // observableArray equivalent of a regular array,  
    self.Employees = ko.observableArray([]);  
    self.AddEmployees = function (name, designation, department, location) {  
        self.Employees.push(new EmployeeList(name, designation, department, location));  
    }  
}  

function MainFunction() {  
    completeEmployeeList = new EmployeeListViewModel();  

    // Retrieve the SharePoint list items  
    retrieveListItems();  

    // Activates knockout.js  
    ko.applyBindings(completeEmployeeList);  
}  

function retrieveListItems() {  
    var clientContext = new SP.ClientContext.get_current();  
    var oList = clientContext.get_web().get_lists().getByTitle('Documents');  
    var camlQuery = new SP.CamlQuery();  
    camlQuery.set_viewXml("<View><RowLimit>10</RowLimit></View>");  
    this.collListItem = oList.getItems(camlQuery);  
    clientContext.load(collListItem);  
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));  
}  

function onQuerySucceeded(sender, args) {  
    var listItemInfo = '';  
    var listItemEnumerator = collListItem.getEnumerator();  
    while (listItemEnumerator.moveNext()) {  
        var currentItem = listItemEnumerator.get_current();  
        completeEmployeeList.AddEmployees(currentItem.get_item("Title"), currentItem.get_item("FileRef"), currentItem.get_item("Editor"),currentItem.get_item("File_x0020_Size"), currentItem.get_item("Modified"));  
    }  
}  

function onQueryFailed(sender, args) {  
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());  
}  

Answer 1

这似乎符合我的预期。如果您没有看到可点击链接，那么您的css中的某些内容会改变样式吗？

这是一个repro代码段，但我删除了与您的api调用相关的代码：

＆＃13;

＆＃13;

var completeEmployeeList = null;

// Class used for saving the field values.  
function EmployeeList(name, designation, department, location) {
  var self = this;
  self.Name = name;
  self.Designation = designation;
  self.Department = department;
  self.Location = location;
}

//  View Model - JavaScript that defines the data and behavior of your UI  
function EmployeeListViewModel() {
  var self = this;
  // observableArray equivalent of a regular array,  
  self.Employees = ko.observableArray([]);
  self.AddEmployees = function(name, designation, department, location) {
    self.Employees.push(new EmployeeList(name, designation, department, location));
  }
}

function MainFunction() {
  completeEmployeeList = new EmployeeListViewModel();

  // Retrieve the SharePoint list items  
  //retrieveListItems();  
  
  //test value
  completeEmployeeList.AddEmployees('Test Name', 'Test Dept', 'Test Designation', 'Test Location');

  // Activates knockout.js  
  ko.applyBindings(completeEmployeeList);
}

MainFunction()

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="tblEmployeeList" border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Designation</th>
      <th>Department</th>
      <th>Location</th>
    </tr>
  </thead>
  <!-- Iterating through every list item using foreach of KO -->
  <tbody data-bind="foreach: Employees">
    <tr>
      <td data-bind="text: Name">
        <span data-bind="text: Name"></span>
      </td>
      <td>
        <a href="#" data-bind="attr: { href: Designation}, text: Designation"></a>
      </td>
      <td data-bind="text: Department"></td>
      <td data-bind="text: Location"></td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;