1

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

$.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 中的甲板，并且淘汰赛应该更新 DOM 以反映更改。我为每个项目创建新元素只是因为我为每个项目添加了一些 ko.computed 和方法。下面是控制台输出：

0

1
2
3
4

也是我的标记：

<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;
    }
4

0 回答 0