Question

我目前正致力于制作联系人编辑器，但并不完全了解基于敲门条件的css绑定。基本上我想要发生的是当您单击添加员工按钮时，会创建两个文本框以添加名字和姓氏。我希望使用knockout条件css绑定突出显示这些字段。单击添加数字选项时，我希望发生同样的事情。这是我的代码和小提琴http://jsfiddle.net/grahamwalsh/c2fmnoub/

HTML

<div data-bind="if:!loaded()"> Loading...Please Wait</div>
<div class='NbiEmployees'data-bind="if:loaded()"> 

<h2>NBI Employees</h2>
<h3>NBI has <span data-bind="text: employees().length"></span> Employees</h3>
<div id='employeesList'>
    <table class='employeesEditor'>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Phone numbers</th>
        </tr>
        <tbody data-bind="foreach: employees">
            <tr>
                <td>
                    <input data-bind='value: firstName' />
                    <div><a href='#' data-bind='click: $root.removeEmployee'>Delete</a></div>
                </td>
                <td><input data-bind='value: lastName' /></td>
                <td>
                    <table>
                        <tbody data-bind="foreach: phones">
                            <tr>
                                <td><input data-bind='value: type' /></td>
                                <td><input data-bind='value: number' /></td>
                                <td><a href='#' data-bind='click: $root.removePhone'>Delete</a></td>
                            </tr>
                        </tbody>
                    </table>
                    <a href='#' data-bind='click: $root.addPhone'>Add number</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<p>
    <button data-bind='click: addEmployee'>Add an Employee</button>
    <button data-bind='click: save, enable: employees().length > 0'>Save to JSON</button>
</p>

<textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'> </textarea>

CSS

body { font-family: arial; font-size: 14px; }

.NbiEmployees { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.NbiEmployees input { font-family: Arial; }
.NbiEmployees b { font-weight: bold; }
.NbiEmployees p { margin-top: 0.9em; margin-bottom: 0.9em; }
.NbiEmployees select[multiple] { width: 100%; height: 8em; }
.NbiEmployees h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }

.NbiEmployees TR { vertical-align: top; }
.NbiEmployees TABLE, .NbiEmployees TD, .NbiEmployees TH { padding: 0.2em; border-width: 0; margin: 0; }
.NbiEmployees TD A { font-size: 0.8em; text-decoration: none; }
.NbiEmployees table.contactsEditor > tbody > TR { border-bottom: 1px solid silver; }
.NbiEmployees td input { width: 8em; }

 li { list-style-type: disc; margin-left: 20px; }

敲除

var EmployeesModel = function () {
var self = this;

self.employees = ko.observableArray(
    );

self.loaded = ko.observable(false);

self.loadData = function loadData() {
  self.loaded(false);

setTimeout(function () {
    var data = [
        {
            firstName: "Graham", lastName: "Walsh", phones: [
              { type: "Office", number: "(555) 121-2121" },
              { type: "Mobile", number: "(555) 123-4567" }]
        },
        {
            firstName: "Kimi", lastName: "Shirasaki", phones: [
              { type: "Office", number: "(555) 444-2222" },
              { type: "Mobile", number: "(555) 999-1212" }]
        }
    ];
    self.employees(ko.utils.arrayMap(data, function (employee) {
        return {
            firstName: employee.firstName,
            lastName: employee.lastName,
            phones: ko.observableArray(employee.phones)
        };
    }));

    self.loaded(true);
 }, 5000);
};

self.addEmployee = function () {
    self.employees.push({
        firstName: "",
        lastName: "",
        phones: ko.observableArray()
    });
};

self.removeEmployee = function (employee) {
    self.employees.remove(employee);
};

self.addPhone = function (employee) {
    employee.phones.push({
        type: "",
        number: ""
    });
};

self.removePhone = function (phone) {
    $.each(self.employees(), function () { this.phones.remove(phone) })
};

self.save = function () {
    self.lastSavedJson(JSON.stringify(ko.toJS(self.employees), null, 2));
};

self.lastSavedJson = ko.observable("")
self.loadData();
};



$(document).ready(function () {
ko.applyBindings(new EmployeesModel());
});

Answer 1

如果您在“必填”字段中添加以下内容：

<input data-bind='value: firstName, css: {warn: !firstName()}' />

然后定义您的warn类：

.warn {
    border-color: red;
}

然后该字段将突出显示。但是，要实现这一点，必须能够观察到这些字段：

http://jsfiddle.net/c2fmnoub/14/

这里，我创建了一个带有可观察字段的Employee（）类（电话号码除外，如果需要也可以观察），在调用addEmployee（）函数时需要创建一个新的字段。 / p>

编辑：电话号码： http://jsfiddle.net/c2fmnoub/16/

与我用可观察字段定义Employee对象的方式相同，我定义了一个带有可观察字段的Phone对象。这应该是OP完成的简单扩展。我真的希望我不只是为你做功课。

敲除out-css绑定以突出显示没有文本的区域

1 个答案: