Question

我一直在尝试用knockout 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”属性将表单控件绑定到该属性。自从我这样做以来，我确实必须声明并初始化Gift Model中的属性......否则我可能会把它们排除在外。它们将初始化为初始数据作为可观察数据。

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

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

使用remove元素敲除数据表绑定

1 个答案: