KnockoutJS Вложенный список

я новичок в KnockoutJS.

У меня есть представление, написанное ниже, и я не могу видеть переменные категорий для каждой категории во время выполнения. Можете посмотреть и сказать, что здесь не так?

Спасибо за вашу помощь.

Мой вид кода:

<table class="table">
    <thead>
    </thead>
    <tbody data-bind="foreach: categories">
        <tr>
            <td data-bind="text: Name">
                <table>
                    <tbody data-bind="foreach: categoryVariables">
                        <tr>
                            <td data-bind="text: Name"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td><button data-bind='click: $root.addCategoryVariable'>Add a category variable</button></td>
        </tr>
    </tbody>
</table>

<button data-bind='click: addCategory'>Add a category</button>

<script type="text/javascript">

    var resumeDataViewModel;

    function Category(data) {
        var self = this;

        self.ID = data.ID;
        self.Name = data.Name;

        self.categoryVariables = ko.observableArray([
            new CategoryVariable({ID: '1', Name: 'asd'})
        ]);
    }

    function CategoryVariable(data) {
        var self = this;

        self.ID = data.ID;
        self.Name = data.Name;
    }

    function ResumeDataViewModel() {
        var self = this;

        self.categories = ko.observableArray([
            new Category({ID: '1', Name : 'Contact', Category: {ID: '1', Name: 'gfdg'}}),
            new Category({ID: '2', Name : 'Education', Category: {ID: '2', Name: 'asdasd'}})
        ]);

        self.addCategory = function(){
            self.categories.push(new Category({
                Name: "sa d"
            }));
        }

        self.addCategoryVariable = function (category) {
            category.categoryVariables.push(new CategoryVariable({
                Name: 'asd'
            }));
        }
    }

    ko.applyBindings(resumeDataViewModel = new ResumeDataViewModel());
</script>

Ищу ваш ответ. Большое спасибо.


person Sinem Bozacı    schedule 18.12.2012    source источник


Ответы (1)


Ваша проблема связана с привязкой текста: имя, а затем добавление таблицы к тому же td. Я переместил таблицу для categoryVariables в отдельный TD, и она отлично работает.

Поскольку вы связали текст TD, привязка данных Ko перезапишет все, что у вас внутри, и просто установит текст из наблюдаемого. Если вы ищете другой макет пользовательского интерфейса, измените свой HTML соответствующим образом, но помните вышеизложенное.

Также проверьте документацию KO об использовании привязок без контейнеров и привязок с привязкой. Это может помочь вам создать лучшие макеты HTML.

Проверьте эту скрипту: http://jsfiddle.net/7BNQy/

Измененный HTML:

<table class="table">
<thead>
</thead>
<tbody data-bind="foreach: categories">
    <tr>
        <td data-bind="text: Name">

        </td>
        <td>
            <table>
                <tbody data-bind="foreach: categoryVariables">
                    <tr>
                        <td data-bind="text: Name"></td>
                    </tr>
                </tbody>
        </table></td>
        <td><button data-bind='click: $root.addCategoryVariable'>Add a category variable</button></td>
    </tr>
</tbody>
</table>

<button data-bind='click: addCategory'>Add a category</button>
person Ravi Y    schedule 18.12.2012
comment
Большое спасибо. Ваш ответ поможет моему будущему KnockoutJS. Спасибо еще раз. - person Sinem Bozacı; 18.12.2012