為什么foreach不能按預期工作？

Question

我從服務器收到json響應，並嘗試將其映射到可觀察的數組，然后將結果顯示在HTML表中。 我從服務器得到的是以下字符串：

{"ids":[1,2,3,4],"names":["1","2","test tracker","test1"],"creators":["1","test","test","test"],"projectNames":["1","1","test project","test"]}

現在，這就是我要在視圖模型中嘗試做的事情：

我有這個對象應該保存值：

trackersObj = function(item){
         this.trackerId = item.ids;
         this.trackerName = item.names;
         this.trackerCreator = item.creators;
         this.projectNames = item.projectNames;
};

這個ko.observableArray應該保存結果並將其循環通過表主體：

trackersObjArray = ko.observableArray([])

這是我做映射的方式：

loadActiveTrackers = function () {
    $.ajax({
        type: 'POST',
        url: 'controller.php',
        dataType: 'json',
        data: {
            action: "loadActiveTs"
        },
        success: function (data) {
            trackersObjArray.push(new trackersObj(data));
            console.log(trackersObjArray());
            $('#allTrackers').show();

        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert('Something got wrong!');
        }
    });
};

最后是我的HTML ：

<table class="dataTable" id="CADataTable">
    <thead>
        <tr>
            <th>Test</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: trackersObjArray">
        <tr>
            <td>
                <input type="text" name="test" data-bind="value: trackerName">
            </td>
        </tr>
    </tbody>
</table>

問題是在tbody的td所有結果都顯示在同一行中。

這是我的意思：

它應該創建與recoreds數量一樣多的行。 為什么會這樣呢？ 我真的不明白我在做什么錯。 我知道我缺少了一個很小的部分，但是在這一刻我無法發現它。

PS

這是console.log(trackersObjArray());的輸出console.log(trackersObjArray());

Answer 1

您的服務器發送多個對象，而不是單個對象。 它只是以一種不同尋常的方式來做：

{
    "ids": [1,2,3,4],
    "names": ["1","2","test tracker","test1"],
    "creators": ["1","test","test","test"],
    "projectNames": ["1","1","test project","test"]
}

真的應該看起來像這樣

[
   {"id": 1, "name": "1", "creator": "1", "projectName": "1"}, 
   {"id": 2, "name": "2", "creator": "test", "projectName": "1"}, 
   {"id": 3, "name": "test tracker", "creator": "test", "projectName": "test project"}, 
   {"id": 4, "name": "test1", "creator": "test", "projectName": "test"}
]

因此，您必須循環推送trackersObj對象。 有幾種選擇。

首先，您必須決定是否要

1. 更新服務器代碼以立即發送正確的對象結構（首選），或者
2. 保持服務器不變，並在客戶端上轉換對象。

由於看不到您的服務器代碼，因此我選擇了選項2

loadActiveTrackers = function () {
    $.post('controller.php', {
        action: "loadActiveTs"
    }).then(function (rawData) {
        // transformation step. if you fix your server to send proper data
        // you can drop the entire then().
        var i, transformedData = [];

        for (i = 0; i < rawData.ids.length; i++) {
            transformedData.push({
                id: rawData.ids[i],
                name: rawData.namess[i],
                creator: rawData.creators[i],
                projectName: rawData.projectNames[i]
            });
        }

        return transformedData;
    }).done(function (transformedData) {
        ko.utils.arrayForEach(transformedData, function (tracker) {
            trackersObjArray.push(new trackersObj(tracker));
        });
    }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
        alert('Something got wrong!');
    });
};

這是“手動”方式。 您可以不用for-each循環，而只需一步即可替換trackersObjArray的值（ trackersObjArray(transformedData);) 。 您還可以將映射插件用於更高級的數據到視圖模型映射。

---

您不應該在視圖模型中使用jQuery（或以其他任何方式引用DOM），因為這不必要地將視圖模型與視圖聯系在一起。 依賴關系只能是相反的方式。

換句話說， $('#allTrackers').show(); 不應在視圖模型中。 使用visible綁定。