您好我是Knockout的新手，现在我正在尝试将其包含在SharePoint中。 在SharePoint中，我没有任何数据库，这就是我使用列表的原因。 我有很多名单。一个是默认值，其中包含其他人的名称。 例如：Brand，Car 01，Car 03和Car 04.在Brand I中有2列 - “Title”和“Car Name” - 带有Car的列表的名称。在Car中我有很多专栏，如“名称”，“模型”，“产品年份”等。 我想使用Knockout以两个foreach显示所有内容。第一个将显示品牌列表的标题，另一个将显示与车辆列表名称相关的所有内容。 结果将是：
品牌标题 - Car 01
car 01 name , car 01 model car 02 name , car 02 model car 03 name , car 03 model品牌标题 - Car 02
car 01 name , car 01 model car 02 name , car 02 model car 03 name , car 03 model品牌标题 - 车04
car 01 name , car 01 model car 02 name , car 02 model car 03 name , car 03 model
我现在拥有的东西：
knockout.html
<!doctype html>
<html >
<head>
<script src="/SiteAssets/js/jquery-1.10.2.js"></script>
<script src="/SiteAssets/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/SiteAssets/js/jquery-ui-timepicker-addon.js"></script>
<script src="/SiteAssets/js/knockout-3.0.0.js"></script>
<link rel="stylesheet" type="text/css" href="/SiteAssets/css/ui-lightness/jquery-ui-1.10.4.custom.css"/>
</head>
<body>
<div id="taskContainer">
<h3>CARS</h3>
<div id="errorBox" data-bind="text: errorMessage, visible: errorMessage"></div>
<div id="saveBox" data-bind="text: saveMessage, visible: saveMessage"></div>
<div data-bind="foreach: listOfBrands">
<div>Brand: <span data-bind="text: BrandName"></span></div>
<table>
<thead>
<tr>
<th>Car name</th>
<th>Model</th>
</tr>
</thead>
<tbody id="myTaskBox" data-bind="foreach: carItems, visible: carItems().length > 0">
You have <b data-bind="text: carItems.length"> </b> incomplete task(s)
<tr>
<td data-bind="text: nameOfCar" ></td>
<td data-bind="text: Model" ></td>
</tr>
</tbody >
</table>
</div>
</div>
<script src="/SiteAssets/js/knockout-extension.js"></script>
</body>
</html>
这是我的knockout-extension.js
（function（）{
function Task(data) { this.nameOfCar = ko.observable(data.Title); this.Model = ko.observable(data.Model); // An additional reference to store the SharePoint list item id. this.Id = ko.observable(data.Id); } function listOfBrandss(data) { this.BrandName = ko.observable(data.BrandName); this.carName = ko.observable(data.carName); // An additional reference to store the SharePoint list item id. this.Id = ko.observable(data.Id); this.calendarItems = ko.observableArray(); } function carViewModel() { //START Data var self = this; //START List self.listOfBrands = ko.observableArray([]); self.carName = ko.observable(); self.BrandName = ko.observable(); //END List //START item self.cars = ko.observableArray([]); self.Name = ko.observable(); self.Model = ko.observable(); //END item //END Data // Additional bindings to use for error and saved messages. self.saveMessage = ko.observable(false); self.errorMessage = ko.observable(false); self.incompletecars = ko.computed(function() { return ko.utils.arrayFilter(self.cars(), function(task) { return !task._destroy}); }); // Operations self.addTask = function() { self.cars.push(new Task({ Title: this.Name(), Model: this.Model(), Id: "New" })); self.Name(""); }; self.removeTask = function(task) { self.cars.destroy(task) }; self.save = function() { for (var task in self.cars()) { var createdcars = []; // Build a request up to send with the CSOM. if (self.cars()[task]._destroy) { // Handle deleted objects // Deleted items that are marked "new" have never been saved to SharePoint to start with, if (self.cars()[task].Id() != "New") { var listItem = taskList.getItemById(self.cars()[task].Id()); listItem.deleteObject(); } } else if (self.cars()[task].Id() == "New") { // Handle new objects to be created. var createInfo = new SP.ListItemCreationInformation(); var listItem = taskList.addItem(createInfo); listItem.set_item("Title", self.cars()[task].Title()); listItem.set_item("Model", self.cars()[task].Model()); listItem.update(); // Save a reference to both the SP.ListItem object and the KO Object so we can update // the latter with the former's ID once the object has been created. createdcars.push({ spItem: listItem, koItem: self.cars()[task] }); ctx.load(listItem); } else { // The item is neither new nor deleted, handle it as an update. var listItem = taskList.getItemById(self.cars()[task].Id()); listItem.set_item("Title", self.cars()[task].Title()); listItem.set_item("Model", self.cars()[task].Model()); listItem.update(); } } // Nowe we have built our request, send it to the server for processing. ctx.executeQueryAsync(function() { // Our save was successful. Now we need to itterate through our newly // created items and ensure that Knockout knows that the ID has changed. for(var item in createdcars) { createdcars[item].koItem.Id(createdcars[item].spItem.get_id()); } // Set our saved message. self.saveMessage("Saved successfully"); }, function(sender, args) { // Our save failed, set the error message to show then log the actual error // to the JavaScript console if it exists. self.errorMessage("Error updating list items"); if (typeof console != "undefined") { console.log(args.get_message()); } }); }; /// Load the data from SharePoint // Get a context to the current site. var ctx = new SP.ClientContext(_spPageContextInfo.webServerRelativeUrl); var web = ctx.get_web(); var taskList = web.get_lists().getByTitle("NameOFLIST!!!"); // Limit our task list to 50 cars. var query = new SP.CamlQuery(); query.set_viewXml("<View><</View> "); var taskItems = taskList.getItems(query); // Ensure the fields we want to retrieve are returned ctx.load(taskItems, "Include(ID,Title,Model)"); // Send our query to the server for processing. ctx.executeQueryAsync(function() { var cars = []; var taskItemEnumerator = taskItems.getEnumerator(); // Iterate through our retrieved data set and build an array of JSON objects containing // the relevent properties. while (taskItemEnumerator.moveNext()) { cars.push( new Task({ Title: taskItemEnumerator.get_current().get_item("Title"), Model: taskItemEnumerator.get_current().get_item("Model"), Id: taskItemEnumerator.get_current().get_item("ID") }) ); } // Update the Knockout cars array with our data from the server. self.cars(cars); }); //START Get all var loc = new SP.ClientContext(_spPageContextInfo.webServerRelativeUrl); var web = loc.get_web(); var locList = web.get_lists().getByTitle("Brand"); // Limit our task list to 50 cars. var query = new SP.CamlQuery(); query.set_viewXml("<View><RowLimit>50</RowLimit></View> "); var locItems = locList.getItems(query); // Ensure the fields we want to retrieve are returned loc.load(locItems , "Include(ID,Title,Car name)"); // Send our query to the server for processing. loc.executeQueryAsync(function() { var locA = []; var locItemEnumerator = locItems.getEnumerator(); // Iterate through our retrieved data set and build an array of JSON objects containing // the relevent properties. while (locItemEnumerator.moveNext()) { //locA.push( var cos = new listOfBrandss({ BrandName: locItemEnumerator.get_current().get_item("Title"), carName: locItemEnumerator.get_current().get_item("Car_x0020_name"), Id: locItemEnumerator.get_current().get_item("ID") }); //); /*HERE IS PLACE FOR CODE*/ locA.push(cos); } // Update the Knockout cars array with our data from the server. self.listOfBrands(locA); }); //END Get all Calendar from "List of Calendars" } $(document).ready(function() { // I use jQuery for this, but you could add an event listener to the document object instead. EnsureScriptFunc("sp.js", "SP.ClientContext", function() { ko.applyBindings(new carViewModel()); }); }); })();
据我所知，我必须将代码放在我所在的地方“这里是代码的地方”，我必须称之为“从SharePoint加载数据”我所尝试的一切都没有成功:(