CODEWITHSUNDEEP
javascriptbindingknockout.js
digor_ua
digor_ua

Reputation: 592

Incorrect combobox binding with Knockout framework

Helo everyone

I've create simple page with table and would like populate it with data using knockout framework.

The table contain three columns that display data from underlying viewModel. Generally thats works, but I have a little problem with first column (combobox that allow choose current item): I want display "number" property as combo caption and specify property name in binding, but value "[Object object]" is displayed instead number property.

So, what is wrong in my binding. How to correct display "number" property?

Thank you.

Page code is here:

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

Upvotes: 0

Views: 984

Answers (1)

John Earles
John Earles

Reputation: 7194

Your select should look like this:

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

Note the use of optionsText, which takes a string (identifying the attribute name).

Here is a fiddle that demonstrates: http://jsfiddle.net/jearles/5qakM/

Read the options binding docs for more details.

Upvotes: 1

Related Questions