Хобрук: Ваш путь к мастерству в программировании

Привязать флажок в сетке без значения

Я использую наблюдаемый массив нокаута для привязки таблицы html, как это

<div>
<button data-bind='click: update'>Get Data</button>
</div>
<div id="divLanguage" style="overflow: hidden;">
<table style="width: 760px;">
    <tr>
        <td style="padding: 0px;width: 100px;font-weight: bold">name</td>
        <td style="padding: 0px;width: 70px;font-weight: bold">select</td>
    </tr>
</table>
<div id="language" style="overflow: auto;height: 540px;">
    <table id="Table1" class="gridHover" style="width: 760px;">
        <tbody data-bind="foreach: queryResult">
            <tr>
                <td style="padding: 0px;text-align: left;width: 100px" data-bind="text: name"></td>
                <td style="padding: 0px;text-align: left;width: 70px">
                    <input type="checkbox" />
                </td>

            </tr>
        </tbody>
    </table>
</div>

The view model is 

var initialData = [{
id: 1,
name: "Well-Travelled Kitten",
sales: 352,
price: 75.95,
whatever: 10
  }, {
id: 2,
name: "Speedy Coyote",
sales: 89,
price: 190.00,
whatever: 100
 }, ];

 function viewModel() {
var self = this;
self.queryResult = ko.observableArray();
this.update = function (data) {
    //this is an ajax call and return dateset back
    $.each(initialData, function (index, item) {
        self.queryResult.push(item);
    });

};

}

 ko.applyBindings(new viewModel());

Вы можете видеть, что флажок не привязан ни к какому полю. Я знаю, что мы можем использовать проверенную привязку для привязки данных к флажку. Проблема в том, что я не могу привязать флажок к любому столбцу, потому что я буду получать информацию на лету. В наблюдаемом массиве у меня есть свойство с именем id, и я получу информацию, имеет ли этот id значение true или false. В зависимости от этого я хочу привязать флажок.

Я действительно не знаю, как поступить с этим. Кто-нибудь знает о привязке флажка без столбца. Кроме того, как только мы привяжем, как мы можем получить значение из флажка, когда мы ставим или снимаем его?

Вот скрипта

checkbox jquery knockout.js
18.08.2014

  • Помогает ли эта Fiddle? 19.08.2014
  • Итак, вы хотите только привязать флажок и иметь возможность его прочитать, если id равно true или false? 19.08.2014
  • jsfiddle.net/FB6LA/69 вы можете проверить или снять отметку на основе любого выражения, которое возвращает true или false , это не обязательно должен быть столбец. Вы также можете использовать Computed.observable, если вам нужно написать обратно. 19.08.2014

Ответы:


1

Я бы начал с создания модели на стороне клиента и сопоставления с ней входящих данных. Таким образом, вы можете иметь свойства, которые имеют отношение только к стороне клиента.

JavaScript

var MyModel = function (data) {
    var self = this;
    self.id = ko.observable(data.id || '');
    self.name = ko.observable(data.name || '');
    self.price = ko.observable(data.price || 0.0);
    self.sales = ko.observable(data.sales || 0);
    self.whatever = ko.observable(data.whatever || '');
    self.selected = ko.observable(false);
    return self;
};

function viewModel() {
    var self = this;
    self.queryResult = ko.observableArray();
    self.update = function (data) {
        //this is an ajax call and return dateset back
        $.each(initialData, function (index, item) {
            self.queryResult.push(new MyModel(item));
        });
    };

    self.selectedItems = ko.computed({
        read: function () {
            return ko.utils.arrayFilter(self.queryResult(), function (item) {
                return item.selected() === true;
            });
        },
        deferEvaluation: false
    });
}

HTML

<div>
    <button data-bind='click: update'>Get Data</button>
</div>
<div id="divLanguage" style="overflow: hidden;">
    <table style="width: 760px;">
        <tr>
            <td style="padding: 0px;width: 100px;font-weight: bold">name</td>
            <td style="padding: 0px;width: 70px;font-weight: bold">select</td>
        </tr>
    </table>
    <div id="language" style="overflow: auto;height: 540px;">
        <table id="Table1" class="gridHover" style="width: 760px;">
            <tbody data-bind="foreach: queryResult">
                <tr>
                    <td style="padding: 0px;text-align: left;width: 100px" data-bind="text: name"></td>
                    <td style="padding: 0px;text-align: left;width: 70px">
                        <input type="checkbox" data-bind="checked: selected" />
                    </td>
                </tr>
            </tbody>
        </table>
        <fieldset>
            <legend>Selected Items</legend>
            <ul data-bind="foreach: selectedItems">
                <li data-bind="text: name"></li>
            </ul>
        </fieldset>
    </div>
</div>

так что вы получите что-то вроде этого JSFiddle Demo

19.08.2014
Новые материалы
Создание кнопочного меню с использованием HTML, CSS и JavaScript
Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..
Внедрите OAuth в свои веб-приложения для повышения безопасности
OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..
Классы в JavaScript
class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..
Как свинг-трейдеры могут использовать ИИ для больших выигрышей
По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..
Как построить любой стол
Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...
Обзор: Машинное обучение: классификация
Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..
Разработка расширений Qlik Sense с qExt
Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..