0

optionsValue を指定するまで、すべてが正常に機能する奇妙な問題があります。ここで私の問題を見ることができます

作品 http://jsfiddle.net/abritez/ttyhE/2/

動作しません http://jsfiddle.net/abritez/ttyhE/4/

あなたがする必要があるのは、コメントされている選択でそれを実行してみるだけです。カスケードしようとすると問題が発生します。

JSON データ

var productCategories = [{
"name": "Comapany A",
"abbr": "cA",
"disiplineList": [{
    "name": "Math",
    "abbr": "math",
    "courseList": [{
        "name": "Algebra",
        "abbr": "alg"
    }]
}, {
    "name": "English",
    "abbr": "eng",
    "courseList": [{
        "name": "Phonics",
        "abbr": "phon"
    }]
}]
}, {
"name": "Company B",
"abbr": "cB",
"disiplineList": [{
    "name": "Gym",
    "abbr": "gym",
    "courseList": [{
        "name": "Kick Ball",
        "abbr": "kb"
    }]
}]
}];

HTML コード

<table width='100%'>
<tbody data-bind='foreach: lines'>
  <tr>
         <td>

            <select data-bind='options: productCategories, optionsText: "name",  optionsCaption: "Select...", value: company'> </select>

        </td>
    </tr>
    <tr>
         <td data-bind="with: company">
            <select data-bind='options: disiplineList, optionsText: "name", optionsCaption: "Select...", value: disipline'> </select>
        </td>
    </tr>
     <tr>
         <td data-bind="with: disipline">
            <select data-bind='options: courseList, optionsText: "name",  value: product'></select>
        </td>
    </tr>

</tbody>
</table>

Java Script (knockoutjs)

function ProductLine(){
                    self.company = ko.observable();
                    self.disipline = ko.observable();
                    self.product = ko.observable();

                    // Whenever the category changes, reset the product selection
                    self.company.subscribe(function() {
                        self.disipline(undefined);
                        self.product(undefined);
                    });
                }

                function Product(){
                    self.lines = ko.observableArray([new ProductLine()]); // Put one line in by default
                }

                ko.applyBindings(new Product());​

</p>

4

1 に答える 1

1

それでもわからない。

ただし、名前と略語を表示したい場合は、次のことができます。

 <select data-bind='options: productCategories,
       optionsText: function(item) {return item.name + " - " + item.abbr},  optionsCaption: "Select...", value: company'> </select>

あなたの略語を表示したい場合は、次のことができます。

<td data-bind="with: company">
                            <select data-bind='options: disiplineList, optionsText: "name", optionsCaption: "Select...", value: disipline'> </select>
                             <span data-bind="text: abbr"/> <-- like this
                        </td>
于 2012-07-23T19:24:35.233 に答える