4

目標

KnockoutJS を使用して、外部の observableArray からアイテムを削除します。

問題

私のアプリケーションには2つありobservableArrayます。1 つは購入可能な製品、もう 1 つは をクリックして [概要] に追加した製品ですadd button。

ここまでは、すべて正常に動作します。しかし、Summary から項目を削除し、ボタンの状態/スタイルを変更する必要があります。これを行うために外部にアクセスする方法がわかりませんobservableArray。

私の問題を理解するには、この jsFiddleを確認するか、次のトピックのマークアップを参照してください。

ご覧のとおり、 をクリックするadd buttonと、製品が [概要] に移動します。削除をクリックすると、ボタンがサマリーまたは製品のどちらからのものかに関係なく、ボタンの状態を変更して、アイテムをサマリーから削除したいと考えています。items' observableArray技術的に言えば、アイテムを使用から削除したいproducts' observableArray.

私のコード

HTML:

<ul class="summary">
    <!-- ko foreach: Summary.items -->
        <p data-bind="text: name"></p>
        <button class="btn btn-danger btn-mini remove-item">
            <i class="icon-remove">×</i>
        </button>
    <!-- /ko -->
</ul>

<h1>What would you to buy?</h1>

<ul class="products">
    <!-- ko foreach: Product.products -->
    <li>
        <h3 data-bind="text: name"></h3>
        <p data-bind="text: desc"></p>
        <!-- ko if:isAdded -->
        <button data-bind="if: isAdded" class="btn btn-small btn-success action remove">
            <i data-bind="click: $root.Summary.remove" class="icon-ok">Remove</i>
        </button>
        <!-- /ko -->
        <!-- ko ifnot:isAdded -->
        <form data-bind="submit: function() { $root.Summary.add($data); }">
            <button data-bind="ifnot: isAdded" class="btn btn-small action add">
                <i class="icon-plus">Add</i>
            </button>
        </form>
        <!-- /ko -->
    </li>
    <!-- /ko -->
</ul>

JavaScript:

function Product(id, name, desc) {
    var self = this;

    self.id = ko.observable(id);
    self.name = ko.observable(name);
    self.desc = ko.observable(desc);
    self.isAdded = ko.observable(false);
}

function Item(id, name) {
    var self = this;

    self.id = ko.observable(id);
    self.name = ko.observable(name);
}

function SummaryViewModel() {
    var self = this;
    self.items = ko.observableArray([]);

    self.add = function (item) {
        self.items.push(new Item(item.id(), item.name()));

        console.log(item);

        item.isAdded(true);
    };

    self.remove = function (item) {
        item.isAdded(false);
    };
};

function ProductViewModel(products) {
    var self = this;

    self.products = ko.observableArray(products);
};

var products = [
    new Product(1, "GTA V", "by Rockstar"), 
    new Product(2, "Watch_Dogs", "by Ubisoft")
];

ViewModel = {
    Summary: new SummaryViewModel(),
    Product: new ProductViewModel(products)
}

ko.applyBindings(ViewModel);
4

2 に答える 2

10

検索できます。

カートに同じ ID のアイテムを照会し、削除することができます

self.remove = function (item) {
    var inItems = self.items().filter(function(elem){
        return elem.id() === item.id(); // find the item with the same id
    })[0];
    self.items.remove(inItems);
    item.isAdded(false);
};

数十万のアイテムがない限り、それは完全に十分な速さです。使用することを忘れないitems.remove()でください。そうすれば、更新することがわかりますobservableArray:)

于 2013-07-09T20:52:25.517 に答える
1

製品を observableArray として宣言したら、( thisに従って) remove を呼び出すことができるはずです。渡すために削除されるオブジェクトへの参照があるとします。

于 2013-07-09T21:00:52.620 に答える