-1
私はbookノックアウトの青写真を使って作業していました。ここでは、jqueryデータテーブルをカスタムバインドする方法を示しています。しかし、私は新しい行を追加するのが少し難しいです。あなたがフォームに記入してヒットすると、データテーブルが空になるときのフィドルです。 http://jsfiddle.net/LkqTU/33382/knockout databind jquery行を追加するためのデータテーブル
私は、データテーブルが正常に破棄されて再作成されないと考えています。
ここにカスタムバインディングがあります。
ko.bindingHandlers.dataTable = {
init: function(element, valueAccessor, allBindingsAccessor) {
var value = valueAccessor(),
allBindings = ko.utils.unwrapObservable(allBindingsAccessor()),
options = allBindings.dataTableOptions || {},
$element = $(element);
$element.dataTable(options);
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$element.dataTable().fnDestroy();
});
value.subscribe(function(oldValue) {
console.log('one');
$element.dataTable().fnDestroy();
$element.find("tbody tr").remove();
}, null, "beforeChange");
value.subscribe(function() {
console.log('two');
$element.dataTable(options);
}, null);
}
}
以下のスニペット全体を実行することも、上記のフィディッドを使用することもできます。おかげ
ko.bindingHandlers.dataTable = {
init: function(element, valueAccessor, allBindingsAccessor) {
var value = valueAccessor(),
allBindings = ko.utils.unwrapObservable(allBindingsAccessor()),
options = allBindings.dataTableOptions || {},
$element = $(element);
$element.dataTable(options);
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$element.dataTable().fnDestroy();
});
value.subscribe(function(oldValue) {
$element.dataTable().fnDestroy();
$element.find("tbody tr").remove();
}, null, "beforeChange");
value.subscribe(function() {
$element.dataTable(options);
}, null);
}
}
function employee(id, firstName, lastName, phone, dept) {
var self = this;
this.id = ko.observable(id);
this.firstName = ko.observable(firstName);
this.lastName = ko.observable(lastName);
this.phone = ko.observable(phone);
this.dept = ko.observable(dept);
}
function model() {
var self = this;
this.employees = ko.observableArray([
new employee('1', 'Joe', 'Smith', '333-657-4366', 'IT')
]);
this.id = ko.observable('');
this.firstName = ko.observable('');
this.lastName = ko.observable('');
this.phone = ko.observable('');
this.dept = ko.observable('');
this.add = function() {
self.employees.push(new employee(
this.id(), this.firstName(), this.lastName(), this.phone(), this.dept()
));
// console.log(ko.toJSON(self.employees))
}
}
var mymodel = new model();
$(document).ready(function() {
ko.applyBindings(mymodel);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<table data-bind="dataTable: employees">
<thead>
<tr>
<th>Id</th>
<th>First</th>
<th>Last</th>
<th>Phone</th>
<th>Dept</th>
</tr>
</thead>
<tbody data-bind="foreach: employees">
<tr>
<td data-bind="text: id"></td>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
<td data-bind="text: phone"></td>
<td data-bind="text: dept"></td>
</tr>
</tbody>
</table>
<p style="padding-top: 20px;">
Id:
<input data-bind="textInput: id" />
</p>
<p>
First:
<input data-bind="textInput: firstName" />
</p>
<p>
Last:
<input data-bind="textInput: lastName" />
</p>
<p>
phone:
<input data-bind="textInput: phone" />
</p>
<p>
dept:
<input data-bind="textInput: dept" />
</p>
<p>
<input type="button" value="add employee" data-bind="click: add" />
</p>
、あなたが定期的にノックアウトを使用して起動しようとしている場合は、ビューモデルにあなたのJSONをオンにする2つのプラグインがあります。 http://coderenaissance.github.io/knockout.viewmodel/およびhttp://knockoutjs.com/documentation/plugins-mapping.html – Bindrid