LINUX.ORG.RU

KnockoutJS: select внутри таблицы

 , ,


1

2

Отступление: поскольку начинаю щупать сабжевую библу глубже, вопросов будет чаще :)

Подскажите, пожалуйста. Есть данные с сервера:

    {
          'data' => {
                      'data' => [
                                  {
                                    'name' => '131',
                                    'id' => '41',
                                    'department_id' => '3',
                                    'login' => '131',
                                    'isActive' => 1
                                  }
                                ],
                      'departments' => [
                                         {
                                           'id' => '3',
                                           'name' => 'Основное подразделение'
                                         }
                                       ]
                    }
        }

Нужно из этого кода сделать следующее (расскажу только по сути): таблица из data, где есть колонка Подразделение, которая из себя представляет выпадающий список select-option. Текущее значение - в data.department_id, а полный список в departments.

Сейчас пытаюсь сделать так:

<script type="text/html" id="tableRow">

            <tr>
                <td data-bind="text: $index"></td>
                <td><input type="text" data-bind="value: login"></td>
                <td><input type="text" data-bind="value: name"></td>
                <td><input type="checkbox" data-bind="checked: isActive"></rd>
                <td><h3 data-bind="text: department_id"></h3><br/>
                    <h3 data-bind="text: $parent.departments()[department_id].name"></h3>
                    <select data-bind="
                                    options: $parent.departments, 
                                    value: department_id, 
                                    optionsText: department_id ? $parent.departments()[department_id].name : 'unknown', 
                                    optionsValue: department_id ? $parent.departments()[department_id].id : ''
                            "></select></td>
            </tr>

        </script>

        <table>
            <thead>
                <tr>
                    <th>##</th>
                    <th>Логин</th>
                    <th>Имя</th>
                    <th>Активность</th>
                    <th>Подразделение</th>
                </tr>
            </thead>
            <tbody data-bind="template: {
                name: 'tableRow',
                foreach: rows
            }">
            </tbody>
        </table>

        <script type="text/javascript">
            var UserModel = {
                rows: ko.observableArray(),
                departments: ko.observableArray()
            };

            alert('do');

            var self = this;

            ko.computed(function(){
                jQuery.ajax({
                    url: '<%= url_for('usermanage_getlist') %>.json',
                    type: 'POST',
                    dataType: 'json',
                    context: this,
                    contentType: 'application/json',
                    success: function (data) {
                        this.UserModel.rows(data.data);
                        this.UserModel.departments(data.departments);
                        
                    }
                });
            }, this);

            ko.applyBindings(UserModel);
        </script>

Загвоздка в том, что я не знаю, как дать понять KO, что список для options нужно брать из departments (в родителе таблицы лежит), а не в каждой строке таблицы. Чувствую, где-то не дочитал.

Подскажите, где я не прав?

★★★★★

Ответ на: комментарий от zz

решилось вот такой конструкцией

<td><select data-bind="

    options:$parent.departments(),

    value: department_id,

    optionsText: 'name',

    optionsValue: 'id'

"></select></td>

bvn13 ★★★★★ ()
Последнее исправление: bvn13 (всего исправлений: 2)
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.