Связывание данных со сложным объектом Knockout.js

У меня возникают проблемы с получением цикла foreach для работы в KnockOut.js, и даже когда я пытаюсь получить код, чтобы выбросить ошибку, это не так. Это похоже на то, что он вообще не пытается привязываться к столу.

var History = function (data) {
    this.Average = ko.observable(data.Average);
    this.Count = ko.observable(data.Count);
};

var DataSource = function (data) {
    var convertData = function (array) {
        return $.map(data.Data, function (option) {
            return new History;
        });
    };

    this.Data = ko.observableArray(this.convertData());

    return {
        'Data': this.Data
    };
};

var dataMappingOptions = {
    create: function (options) {
        return new DataSource(options);
    }
};

var dataModel = function() {
    this.source = ko.mapping.fromJS({ 'Data': [], 'Percentage': 0 });
};

currentViewModel = new dataModel();
ko.applyBindings(currentViewModel);

Я усложнил эту сложность, так как все остальное работает. В основном я использую Knockout.Mappings для сопоставления ответа AJAX на эти объекты и добавления функций для вычисленных полей. Вот HTML, который, кажется, игнорирует все, что я делаю; он будет отображаться, но ничего не связывается с ним.

<table>
    <thead>
        <tr>
            <th>Average</th>
            <th>Frequency</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: kjhkjh">
        <tr>
            <td data-bind="text: $data.Average()"></td>
            <td data-bind="value: $data.Average"></td>
            <td data-bind="text: $data.Average"></td>
            <td data-bind="value: $data.Average()"></td>
            <td>Test</td>
        </tr>
    </tbody>
</table>

Поскольку объект kjhkjh не привязан, я бы подумал, что это вызовет ошибку, но это не так. Даже когда я вставляю source.Data , он ничего не делает; он отображает только статическую таблицу и ничего не связывает с ней.

Обновить: Чтобы получить значение от чего-либо в Javascript, я должен использовать что-то вроде этого:

console.log(currentViewModel.source.Data()[11].Average());
1
nl ja de
Добавлю, что ошибок в Firebug нет. Каждая другая часть страницы работает правильно.
добавлено автор PCasagrande, источник
Если это поможет, если вы можете поместить свой код в jsfiddle. Я вижу много ошибок с вашим кодом, но это облегчит жизнь всем, если мы сможем поиграть с кодом.
добавлено автор badsyntax, источник

2 ответы

Эта часть кажется неправильной. У вас есть два возврата в одном выражении. Попробуйте удалить return до $. Map (

var convertData = function (array) {
    return $.map(data.Data, function (option) {
        return new History;
    });
};

Также может быть, что вы ссылаетесь на this для частного метода convertData() объекта DataSource . Удалите this отсюда:

ko.observableArray(this.convertData());
1
добавлено
Это не работает.
добавлено автор PCasagrande, источник
Я также добавил обновление, объяснив, что мне нужно сделать, чтобы получить значения из объектов в javascript.
добавлено автор PCasagrande, источник
Еще ничего. Я не знаю, что с ним происходит, что он даже не допустит ошибку.
добавлено автор PCasagrande, источник
Попробуйте приведенное выше изменение, которое я сделал ;-)
добавлено автор Stokedout, источник
Можете ли вы поместить его в проект jsFiddle и разместить ссылку здесь? Я посмотрю на это для вас
добавлено автор Stokedout, источник

Ошибка, с которой я столкнулся, была вызвана размещением моей модели нокаута на странице. Как только я переместил тег скрипта, ссылаясь на файл JS ниже, где таблица работала правильно. Вот почему вся страница работала, за исключением этой выдержки. Это отчасти потому, что я имею глобальную переменную как несколько частей страницы и несколько файлов JS, необходимых для ее ссылки.

Это сказало, что Stockedout указал на некоторые способы, которыми я смог улучшить код.

0
добавлено
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском