0

ノックアウトjcライブラリは初めてですが、助けてもらえますか? このようなJavaScriptで新しいモデルを作成しました。

ここに画像の説明を入力

コードは次のとおりです。

        <h2>Category : Throusers</h2>

    <h3>Sizes</h3>
    <ul data-bind="foreach: products">
        <li>
            <input type="checkbox" data-bind="value: size.id" />
            <label data-bind="text: size.name"></label>
        </li>
    </ul>

    <h3>Colors</h3>
    <ul data-bind="foreach: products">
        <li>
            <input type="checkbox" data-bind="value: color.id" />
            <label data-bind="    text: color.name"></label>
        </li>
    </ul>

    <h3>Products</h3>
    <ul data-bind="foreach: products">
        <li>
            <label data-bind="text: name"></label> - 
            <label data-bind="text: size.name"></label>-
            <label data-bind="text: color.name"></label>
        </li>
    </ul>

    <script type="text/javascript">

        function Color(id, name) {
            return {
                id: ko.observable(id),
                name: ko.observable(name)
            };
        };

        function Size(id, name) {
            return {
                id: ko.observable(id),
                name: ko.observable(name)
            };
        }

        function Product(id,name, size, color) {
            return {
                id: ko.observable(),
                name: ko.observable(name),
                size: size,
                color: color
            };
        };

        var CategoryViewModel = {
            id: ko.observable(1),
            name: ko.observable("Throusers"),
            products: ko.observableArray([
                new Product(1,"Levi's 501", new Size(1, "30-32"), new Color(1, "Red")),
                new Product(2,"Colins 308", new Size(2, "32-34"), new Color(2, "Black")),
                new Product(3,"Levi's 507", new Size(1, "30-32"), new Color(3, "Blue"))
            ])
        };

        ko.applyBindings(CategoryViewModel);
    </script>

そしていま、

  1. 私はこれが欲しいです: 重複したサイズと色はリストされるべきではありません.
  2. 色から色を選択すると、選択した色の製品がリストされ、他の製品が無効になるはずです

モデルが間違っている場合は?

4

2 に答える 2