带有删除元素的淘汰数据表绑定

Question

我一直在尝试将我的数据表与淘汰赛 js 绑定。 我有一个用于将元素添加到 observableArray 的按钮，它可以有效地更新表格。 对于每一行我都有一个删除按钮，问题是我可以第一次删除一个项目，然后表格更新。之后，没有删除按钮起作用。如果我添加一个项目并单击以删除其他项目，则删除似乎不起作用。 奇怪的是，如果我对表格进行排序或搜索（意思是更新它），删除似乎第二次起作用了。

这是我的代码

<script id="sample2RowTemplate" type="text/html">
 <td> <label data-bind="text: Id" /></td>
        <td> <input type="text" data-bind="value: Title" /></td>
        <td> <input type="text" data-bind="value: Price" /></td>      
        <td><a data-bind="click: function() { vm.removeGift($data); }">Remove</a></td>
    </script>

还有：

    var initialData = [{
    Id: 1,
    Title: 'Star Wars Blue Ray',
    Price: '90.00'}];
var initCounter = 1;

//define record class

function GiftRecord(id, title, price) {
    this.Id = ko.observable(id);
    this.Title = ko.observable(title);
    this.Price = ko.observable(price);
}

//map the records
var mappedData = ko.utils.arrayMap(initialData, function(item) {
    return new GiftRecord(item.Id, item.Title, item.Price);
});

//Build viewModel

function viewModel() {
    this.gifts = ko.observableArray(mappedData);
    this.addGift = function() {
        initCounter += 1;
        var title = $("#newTitle").val();
        var price = $("#newPrice").val();
        var rec = new GiftRecord(initCounter, title, price);
        this.gifts.push({
            Id: rec.Id,
            Title: rec.Title,
            Price: rec.Price
        });
    };
    this.removeGift = function(gift) {
        this.gifts.remove(function(item2) {
            return gift.Id == item2.Id;
        });
    };

    this.testUpdate = function() {
        this.gifts()[0].Title("test123");
    };

    this.save = function() {
        ko.utils.postJson(location.href, {
            gifts: ko.toJS(this.gifts()),
            guid: giftsSignalR.guid
        });
    };
}
vm = new viewModel();
//Bind viewModel to HTML
$(function() {
    ko.applyBindings(vm, $("#sample2")[0]);
});

这与以下内容基本相同： http://jsfiddle.net/bdetchison/b4SsE/

请帮忙....

Answer 1

使用您的代码似乎可以正常工作。我原以为事情不会奏效。将模型绑定到页面时，我会做一些不同的事情……但这似乎确实有效::

http://jsfiddle.net/beauxjames/RYUHy/1/

现在...为了稍微不同的方向，我会执行以下操作::

http://jsfiddle.net/beauxjames/RYUHy/

在这个模型中，我已经从模型中完全删除了对 DOM 的引用。最重要的是，记下 ko.mapping 调用，看看礼物是如何被添加的，而且它们的属性也被自动观察到。初始数据有一个小的变化，我将礼物数组包装到一个命名对象中......这使我能够拥有一个父模型并将礼物保留为孩子。

var initialData = { 'gifts' : [ ... ] };

var giftMapping = {
    'gifts': {
        create: function (options) {
            if (options.data != null) return new GiftModel(options.data);
        }
    }
}

新礼物的添加不再依赖于对关联视图模型中输入字段的引用。我在父模型中创建了一个名为 newGift 的属性，并使用 data-bind="with: newGift" 属性将表单控件绑定到该属性。既然我这样做了，我确实必须在礼物模型中声明和初始化属性……否则我可以把它们排除在外。它们会被初始化为可观察的初始数据。

var GiftModel = function(data) {
    var self = this;
    self.Id = ko.observable();
    self.Title = ko.observable();
    self.Price = ko.observable();
    ko.mapping.fromJS(data, {}, self);
}

无论如何，希望这对您有所帮助，并为您提供一种看待事物的新方式。我认为随着向 angular 等平台的转变开始形成，这些方法变得更加普遍。