0

みなさん、こんにちは。

テーブルを使用して単純なページを作成し、ノックアウトフレームワークを使用してデータを入力したいと思います。

このテーブルには、基になるviewModelからのデータを表示する3つの列が含まれています。通常は機能しますが、最初の列（現在のアイテムを選択できるコンボボックス）に少し問題があります。コンボキャプションとして「number」プロパティを表示し、バインディングでプロパティ名を指定したいのですが、代わりに値「[Objectobject]」が表示されます番号プロパティ。

だから、私のバインディングの何が問題になっていますか。表示の「数値」プロパティを修正するにはどうすればよいですか？

ありがとうございました。

ページコードはこちら：

<head>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js" type="text/javascript"></script>
</head>
<body>
<button data-bind="click: addItem">Add product</button>

    <table>
        <thead>
            <tr>
                <th>Number</th>
                <th>Name</th>
                <th>Count</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: itemsData">
            <tr>
                <td>
                    <select data-bind="options: $root.avaliableItems, optionsText: $data.number, optionsCaption: 'Select...', value: tableItem"> </select>
                </td>
                <td data-bind="with: tableItem">
                    <span data-bind="text: name"> </span>
                </td>
                <td>
                    <input data-bind="value: count" />
                </td>
            </tr>
        </tbody>
    </table>

    <script type="text/javascript">
        function TableItem(number, name){
            var self = this;
            self.number = ko.observable(number);
            self.name = ko.observable(name);
        };

        function ExtendedItem(){
            var self = this;
            self.tableItem = ko.observable();
            self.count = ko.observable(1);
        };

        function SampleViewModel(){
            var self = this;
            self.avaliableItems = [
                new TableItem("Num1", "Item 1 name"),
                new TableItem("Num2", "Item 2 name"),
                new TableItem("Num3", "Item 3 name"),
                new TableItem("Num4", "Item 4 name"),
                new TableItem("Num5", "Item 5 name"),
                new TableItem("Num6", "Item 6 name"),
                new TableItem("Num7", "Item 7 name")
            ];

            self.itemsData = ko.observableArray();

            self.addItem = function(){
                self.itemsData.push(new ExtendedItem());
            };
        };
        ko.applyBindings(new SampleViewModel());
    </script>
</body>
4

1 に答える 1

1

選択は次のようになります。

<select data-bind="options: $root.avaliableItems, optionsText: 'number', optionsCaption: 'Select...', value: tableItem"> </select>

optionsText文字列を取る (属性名を識別する)の使用に注意してください。

これを示すフィドルは次のとおりです。http://jsfiddle.net/jearles/5qakM/

詳細については、オプション バインディングのドキュメントを参照してください。

于 2012-05-27T10:08:04.217 に答える