Question

我写了下面的代码，我在这一点上陷入困境 - 我要求服务器提供一些数据，而且，我收到了这段数据。现在，我想做的就是更新我的收藏。

function GameViewModel() {
    var self = this;

    self.colors = [];   // I had to create additional lists that contain the same data as observableArrays. Is it necessery?
    self.storages = [];

    self.colorList = ko.observableArray([]);
    self.storageList = ko.observableArray([]);

    $.getJSON("api/Color", function (allData) {
        _.each(allData, function (color) {
            var newColor = new Color(color.Name, color.ColorHash, color.ColorHex, color.Amount, color.HourIncrement, color.IncrementBonus, color.VisitIncrement, color.VisitFrequency);
            self.colorList.push(newColor);
            self.colors.push(newColor);
        });

        $.getJSON("api/Storage", function (storageData) {
            _.each(storageData, function (storage) {
                var foundColor = _.find(allData, function (color) { return color.ColorHash == storage.ColorHash; });
                var newStorage = new Capacity(storage.ColorHash, foundColor.ColorHex, foundColor.Amount, storage.ActualStorage);
                self.storageList.push(newStorage);
                self.storages.push(newStorage);
            });
        });
    });

    self.enlargeStorage = function (storage) {
        $.ajax({
            type: "GET",
            url: "api/Storage",
            data: { color: storage.colorHash },
            beforeSend: function (xhr) {
                xhr.overrideMimeType("text/plain; charset=x-user-defined");
            }
        })
        .done(function (returnObj) {
            for (var i = 0; i < self.storages.length; i++) {
                if (self.storages[i].colorHash == returnObj.ColorHash) {
                    self.storages[i].actualMaxAmount = returnObj.ActualStorage;
                    break;
                }
            }

            self.storageList = ko.observableArray(self.storages);
        });
    };
};
ko.applyBindings(new GameViewModel());

观看代码：

 <ul data-bind="foreach: storageList">
        <li>
            <table class="colorStorageContainer">
                <tr>
                    <td>
                        <table class="colorStorageSize">
                            <tr>
                                <td data-bind="style: { backgroundColor: colorHex }"></td>
                                <td>Capacity</td>
                                <td data-bind="text: actualMaxAmount"></td>
                                <td data-bind="text: actualAmountPerctentage"></td>
                                <td><button data-bind="click: $parent.enlargeStorage">Enlarge</button></td>
                            </tr>
                        </table>
                    </td>
                </tr>

...

数据无法刷新。看起来什么也没发生。调试器不会显示任何异常。

如何刷新self.storageList？

Answer 1

这就是问题所在：

self.storageList = ko.observableArray(self.storages);

它应该是：

self.storageList(self.storages);

你不应该替换observableArray。因为只有旧的（原始的observableArray）绑定到视图。

您不需要两个版本的数据。试试这个：

.done(function (returnObj) {
    // notice the (), this evaluates the observableArray and get the inner array
    var storages =  self.storageList();

     for (var i = 0; i < storages.length; i++) {
        if (storages[i].colorHash == returnObj.ColorHash) {
            storages[i].actualMaxAmount = returnObj.ActualStorage;
            break;
        }
     }
});

Answer 2

我发现了这个问题：

 if (self.storages[i].colorHash == returnObj.ColorHash)

JavaScript无法比较这两个值。 returnObj有两个属性，调试器显示这个值，但如果我将鼠标放在ColorHash上，则键入未定义。我已尝试使用_.find（）下划线方法，但我认为这是不刷新的原因。

knockout.js刷新数据

2 个答案: