如何在 Javascript 中将字符串数组列表插入到表行中

嗨，我

有一个 MVC 项目，我正在调用 POST 从服务器端获取数据，效果很好！

我有一个引导 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>

从 post 返回的数据是一个字符串数组列表，每个数组都具有我尝试绑定到表每行单元格的五种数据类型。

提前谢谢你！！

我

更新了我的工作模型，没有绑定问题，我目前遇到的唯一问题是 ko.observable 数组"self。ComputedCropData"确实被推送了所有数据，但视图没有更新

var vm = {
    data: ko.observableArray([])
}

$.post("/Home/Index", 
       { "T": Township, "R": Range, "S": Section }, 
       function (data) { vm.data(data); }, 'json');