Question

我有一个简单的网页，用户可以查看他们的卡片组，删除和添加卡片，我正在使用淘汰赛来保持简单。当我单击一个按钮时，执行以下代码：

$.ajax({
    type: "POST",
    url: input.UrlAction_RemoveFromDeck,
    data: {
        accessToken: input.accessToken,
        id: el.Id
    }
}).done(function (data) {
    self.deck.splice(0, self.deck().length);
    console.log(self.deck().length);
    console.log("     ");
    data.Items.forEach(function (el, index) {
        var element = createElement(el);
        if (element.Id() !== 0)
            self.deck.push(element);
        console.log(self.deck().length);
    });

服务应从我的套牌中移除一件物品并返回我的新牌组。这部分有效，如果我检查返回的数据，我实际上可以看到我的新套牌。之后我想在view_model中使用新数据重新填充deck，并且knockout应该更新DOM以反映更改。我为每个Item创建了新的Element，因为我为每个Item添加了一些ko.computed和方法。以下是控制台输出：

也是我的标记：

<script type="text/html" id="deck-template">
    <div class="card">
    <div class="card-thumb" data-bind="style: { backgroundColor: color, 'background-image': 'url(' + ThumbnailUrl() + ')' }">
        <div class="card-desc" ><a data-bind="if: enabled, text: TitleUpper(), attr: { href: href }"></a></div>
    </div>
    </div>
</script>

<div id="deck" data-bind="template: { name: 'deck-template', foreach: deck }">
</div>

我删除了一些，因为它不相关。我应该补充一点，我已经使用非常相似的代码片段（除了URL和数据发送不同）以获得页面加载的用户套牌。谢谢你的帮助。

编辑：

按要求添加了createElement函数：

function createElement(el) {
        var element = ko.mapping.fromJS(el);
        element.enabled = ko.observable(true);
        element.color = ko.observable(self.randColor());
        element.href = ko.observable(input.UrlAction_Reads + '?TrapId=' + el.SourceId);
        element.TitleUpper = ko.computed(function () { return element.Title().toUpperCase(); });
        element.add = function () {
            if (element.enabled()) {
                element.enabled(false);
                    $.ajax({
                        type: "POST",
                        url: input.UrlAction_AddToUserDeck,
                        data: $.toDictionary({
                            accessToken: input.accessToken,
                            data: el
                        })
                    }).done(function (data) {
                        self.discover.remove(element);
                        self.deck.splice(0, self.deck().length);
                        data.Items.forEach(function (el, index) {
                            var element = createElement(el);
                            if (element.Id() !== 0)
                                self.deck.push(element);
                        });
                    }).always(function () {
                        element.enabled(true);
                    });
            }
        };
        element.remove = function () {
            if (element.enabled()) {
                element.enabled(false);
                $.ajax({
                    type: "POST",
                    url: input.UrlAction_RemoveFromDeck,
                    data: {
                        accessToken: input.accessToken,
                        id: el.Id
                    }
                }).done(function (data) {
                    self.deck.splice(0, self.deck().length);
                    console.log(self.deck().length);
                    console.log("     ");
                    data.Items.forEach(function (el, index) {
                        var element = createElement(el);
                        if (element.Id() !== 0)
                            self.deck.push(element);
                        console.log(self.deck().length);
                    });
                }).always(function () {
                    element.enabled(true);
                });
            }
        };
        return element;
    }

obpablearray在.push之后没有更新

0 个答案: