1

データテーブルをノックアウト js にバインドしようとしています。テーブルを効率的に更新する observableArray に要素を追加するためのボタンがあります。行ごとに削除ボタンがありますが、問題は、最初にアイテムを削除してからテーブルを更新できることです。その後、削除ボタンは機能しません。アイテムを追加し、クリックして他のアイテムを削除すると、削除が機能していないようです。奇妙なことに、テーブルを並べ替えたり検索したりすると (更新を意味します)、削除が 2 度目に機能するように見えます。

これが私のコードです

<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/と同じです。

助けてください....

4

1 に答える 1

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

新しい Gift の追加は、関連付けられたビュー モデル内からの入力フィールドへの参照に依存しなくなりました。親モデル内に 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);
}

とにかく、これが助けになり、物事を見る新しい方法を提供してくれることを願っています. angular のようなプラットフォームへの移行が具体化し始めているため、これらの方法はより一般的になっていると思います。

于 2013-09-19T05:48:48.937 に答える