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

Question

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

我有一个引导 css 表，我想将 POST 回调函数中的所有数据绑定到该表。

下面是我的代码sn-p：

JS 和虚拟机

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”确实被推送了所有数据，但视图没有更新

Answer 1

回调中返回的数据需要以某种方式附加到您的视图模型。我不确定你是如何创建视图模型的，但如果你有这样的东西：

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

那么您需要在 ajax 回调中更新该数据数组。

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

假设您的 data observable 数组保存的是普通的旧 JavaScript 对象，这很好。但是，如果您需要将这些对象映射到具有剔除可观察对象的对象，那么您必须以某种方式对其进行映射。您可以手动映射所有内容，也可以使用knockout's mapper