0
嗨我有一個MVC項目，我正在調用POST從服務器端獲取數據，這非常棒！如何將字符串數組列表插入到表格行中使用Javascript
我有一個bootstrap css表，我想要綁定POST回調函數中的所有數據。
下面是我的代碼片段：
JS & VM
var map;
var updateFeature;
function OpCropData(opCropName, opET, opEffRain, opCIR, opRecharge) {
var self = this;
self.opCropName = ko.observable();
self.opET = ko.observable();
self.opEffRain = ko.observable();
self.opCIR = ko.observable();
self.opRecharge = ko.observable();
}
var VM = function(){
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/dijit/AttributeInspector",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"dojo/_base/Color",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/config",
"esri/tasks/query",
"dojo/parser",
"dojo/dom-construct",
"dijit/form/Button",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
],
function (
Map, FeatureLayer, AttributeInspector,
SimpleLineSymbol, SimpleFillSymbol, Color,
ArcGISDynamicMapServiceLayer, esriConfig,
Query,
parser, domConstruct, Button
) {
parser.parse();
var self = this;
//ComputedCropData Values
self.ComputedCropData = ko.observableArray([OpCropData()]);
// refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/en/javascript/jshelp/ags_proxy.html
esriConfig.defaults.io.proxyUrl = "/proxy";
map = new Map("mapDiv", {
//basemap: "county",
//center: [-97.395, 37.537],
//zoom: 5
});
map.on("layers-add-result", initSelectToolbar);
var petroFieldsMSL = new ArcGISDynamicMapServiceLayer("http://server18/ArcGIS/rest/services/TestMaps/CIR/MapServer");
petroFieldsMSL.setDisableClientCaching(true);
map.addLayer(petroFieldsMSL);
var petroFieldsFL = new FeatureLayer("http://server18/ArcGIS/rest/services/TestMaps/CIR/MapServer/7", {
mode: FeatureLayer.MODE_SELECTION,
outFields: ["OBJECTID", "SCTCOR_ID", "DIR", "TWNSHP", "RNG", "SECTION_", "X_COORD", "Y_COORD"]
});
var selectionSymbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_NULL,
new SimpleLineSymbol(
"solid",
new Color("blue"),
2
),
null
);
petroFieldsFL.setSelectionSymbol(selectionSymbol);
petroFieldsFL.on("edits-complete", function() {
petroFieldsMSL.refresh();
});
map.addLayers([petroFieldsFL]);
function initSelectToolbar(evt) {
var petroFieldsFL = evt.layers[0].layer;
var selectQuery = new Query();
map.on("click", function (evt) {
selectQuery.geometry = evt.mapPoint;
petroFieldsFL.selectFeatures(selectQuery, FeatureLayer.SELECTION_NEW, function (features) {
if (features.length > 0) {
//store the current feature
updateFeature = features[0];
map.infoWindow.setTitle(features[0].getLayer().name);
map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
} else {
map.infoWindow.hide();
}
});
});
map.infoWindow.on("hide", function() {
petroFieldsFL.clearSelection();
});
var layerInfos = [{
'featureLayer': petroFieldsFL,
'showAttachments': false,
'isEditable': false,
'fieldInfos': [
{ 'fieldName': 'OBJECTID', 'isEditable': false, 'label': 'OBJECTID:' },
{ 'fieldName': 'SCTCOR_ID', 'isEditable': false, 'label': 'SCTCOR_ID:' },
{ 'fieldName': 'DIR', 'isEditable': false, 'label': 'DIR:' },
{ 'fieldName': 'TWNSHP', 'isEditable': false, 'label': 'TWNSHP:' },
{ 'fieldName': 'RNG', 'isEditable': false, 'label': 'RNG:' },
{ 'fieldName': 'SECTION_', 'isEditable': false, 'label': 'SECTION_:' },
{ 'fieldName': 'X_COORD', 'isEditable': false, 'label': 'X_COORD:' },
{ 'fieldName': 'Y_COORD', 'isEditable': false, 'label': 'Y_COORD:' }
]
}];
var attInspector = new AttributeInspector({
layerInfos: layerInfos
}, domConstruct.create("div"));
//add a save button next to the delete button
var saveButton = new Button({ label: "Save", "class": "saveButton" });
domConstruct.place(saveButton.domNode, attInspector.deleteBtn.domNode);//, "after");
//add a data button
var dataButton = new Button({ label: "Data", "class": "dataButton" });
domConstruct.place(dataButton.domNode, attInspector.deleteBtn.domNode, "after");
dataButton.on("click", function GetTRS() {
var objectID = updateFeature.attributes.OBJECTID;
var Direction = updateFeature.attributes.DIR;
var Township = updateFeature.attributes.TWNSHP;
var Range = updateFeature.attributes.RNG;
var Section = updateFeature.attributes.SECTION_;
$.post("/Home/Index", { "T": Township, "R": Range, "S": Section }, function (data) {
for (var i = 0; i < data.length; i++) {
self.ComputedCropData.push(data[i]);
}
}, 'json');
});
map.infoWindow.setContent(attInspector.domNode);
map.infoWindow.resize(350, 240);
}
})};
$(document).ready(function() {
ko.applyBindings(new VM());
});
HTML
<div class="container">
<table class="Computed CIR table table-bordered">
<thead>
<tr>
<th style="text-align: center"><b>Crop</b></th>
<th style="text-align: center"><b>ET (inches)</b></th>
<th style="text-align: center"><b>Eff.Rain (inches)</b></th>
<th style="text-align: center"><b>CIR (inches)</b></th>
<th style="text-align: center"><b>Recharge (inches)</b></th>
</tr>
</thead>
<tbody data-bind="foreach: ComputedCropData">
<tr>
<td style="text-align: center" data-bind="text: opCropName"></td>
<td style="text-align: center" data-bind="text: opET"></td>
<td style="text-align: center" data-bind="text: opEffRain"></td>
<td style="text-align: center" data-bind="text: opCIR"></td>
<td style="text-align: center" data-bind="text: opRecharge"></td>
</tr>
</tbody>
</table>
數據返回來回m post是一個字符串數組的列表，每個數組都有五種數據類型，我試圖綁定到表格的每一行中的單元格。
預先感謝您！
我更新了我的工作模式，沒有約束力的問題，我目前唯一的問題是，ko.observable陣列「self.ComputedCropData」並得到所有的數據推動，但鑑於沒有更新
我假設您忘記添加knockoutjs標記了嗎？ –
最好是寫你的viewmodel來得到正確的答案 –
我對Knockout來說也是新的，所以我不確定我是否可以使用View模型函數。 – sss111