0

有一个奇怪的问题，在我指定 optionsValue 之前一切正常。你可以在这里看到我的问题

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

不起作用 http://jsfiddle.net/abritez/ttyhE/4/

您需要做的就是尝试使用注释的 select 运行它，您将在尝试级联时看到问题。

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 回答