KnockOut フレームワークを使用して、1 つのページに複数のテーブルを作成したいと考えています。
たとえば、私のページでは、ノックアウトにバインドされた 4 つのテーブルを異なるViewModel.
2387 次
4 に答える
2
ページに複数の異なるビューモデルを配置する場合は、ビューモデルをオブザーバブルに保持する追加のビューモデルを作成することをお勧めします。そうすれば、バインディングを 1 回適用するだけで、DOM 内の同じノードに複数回バインドするリスクなしに、異なるビューモデルにバインドする必要があるページ要素でwith:バインディングを利用できます。
jsFiddle を使用した簡単な例を次に示します: http://jsfiddle.net/2DD5J/
于 2012-08-10T12:14:44.783 に答える
1
これは、DIVIDを使用して複数のビューモデルを追加することで実現できます。
<script type="text/javascript">
$(document).ready(function () {
ko.applyBindings(new PagedGridModel(initialData), $("#liveExample")[0]);
ko.applyBindings(
ko.applyBindings(new PagedGridModel1(initialData), $("#liveExample1")[0]);
});
var initialData = [
{ name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
{ name: "Speedy Coyote", sales: 89, price: 190.00 },
{ name: "Furious Lizard", sales: 152, price: 25.00 },
{ name: "Indifferent Monkey", sales: 1, price: 99.95 },
{ name: "Brooding Dragon", sales: 0, price: 6350 },
{ name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
{ name: "Optimistic Snail", sales: 420, price: 1.50 }
];
var PagedGridModel = function (items) {
this.items = ko.observableArray(items);
this.addItem = function () {
this.items.push({ name: "New item", sales: 0, price: 100 });
};
this.sortByName = function () {
this.items.sort(function (a, b) {
return a.name < b.name ? -1 : 1;
});
};
this.jumpToFirstPage = function () {
this.gridViewModel.currentPageIndex(0);
};
this.gridViewModel = new ko.simpleGrid.viewModel({
data: this.items,
columns: [
{ headerText: "Item Name", rowText: "name" },
{ headerText: "Sales Count", rowText: "sales" },
{ headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
],
pageSize: 4
});
};
var PagedGridModel1 = function (items) {
this.items = ko.observableArray(items);
this.addItem = function () {
this.items.push({ name: "New item", sales: 0, price: 100 });
};
this.sortByName = function () {
this.items.sort(function (a, b) {
return a.name < b.name ? -1 : 1;
});
};
this.jumpToFirstPage = function () {
this.gridViewModel1.currentPageIndex(0);
};
this.gridViewModel1 = new ko.simpleGrid.viewModel({
data: this.items,
columns: [
{ headerText: "Item Name", rowText: "name" },
{ headerText: "Sales Count", rowText: "sales" },
{ headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
],
pageSize: 4
});
};
</script>
<div id='liveExample'>
<div data-bind='simpleGrid: gridViewModel'>
</div>
<button data-bind='click: addItem'>
Add item
</button>
<button data-bind='click: sortByName'>
Sort by name
</button>
<button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
Jump to first page
</button>
</div>
<div id='liveExample1'>
<div data-bind='simpleGrid: gridViewModel1'>
</div>
<button data-bind='click: addItem'>
Add item
</button>
<button data-bind='click: sortByName'>
Sort by name
</button>
<button data-bind='click: jumpToFirstPage, enable: gridViewModel1.currentPageIndex'>
Jump to first page
</button>
</div>
于 2012-09-27T13:02:24.587 に答える
0
これは、ニーズに応じてさまざまな方法で完了することができます。
4 つのコレクションを持つ 1 つのビュー モデル、またはそれぞれ 1 つのコレクションを持つ 4 つのビュー モデル。
これは最初のものです：
function Item(name) {
this.name = name;
}
function VM() {
this.collection1 = ko.observableArray();
this.collection2 = ko.observableArray();
this.collection3 = ko.observableArray();
var self = this;
self.init = function () {
var c1i1 = new Item("C1 I1");
var c1i2 = new Item("C1 I1");
self.collection1([c1i1, c1i2]);
var c2i1 = new Item("C2 I1");
var c2i2 = new Item("C2 I1");
self.collection2([c2i1, c2i2]);
var c3i1 = new Item("C3 I1");
var c3i2 = new Item("C3 I1");
self.collection3([c3i1, c3i2]);
};
self.init();
}
ko.applyBindings(new VM(), document.getElementById('test'));
<div id="test">
<div data-bind="foreach:collection1">
<div data-bind="text:name"></div>
</div>
<div data-bind="foreach:collection2">
<div data-bind="text:name"></div>
</div>
<div data-bind="foreach:collection3">
<div data-bind="text:name"></div>
</div>
</div>
ただし、4 つの異なる独立したビュー モデルを使用する場合は、それぞれに独自のコレクションを作成し、次のように id でノックアウト バインディングを適用する必要があります。
ko.applyBindings(new VM(), document.getElementById('ViewModel1Container'));
最初の例をいじってください。
于 2012-08-10T10:14:12.530 に答える
0
jsFiddle の 1 つのページに複数のノックアウト グリッドの実際の例を作成しました。ここにあります。
改善される可能性はあると思いますが、これが今のところ私が持っているものです。
HTML
<div id="as">
<h1>As</h1>
<div data-bind="foreach: as">
<input name="a1" id="a1" data-bind="value: a1" /><br />
<input name="a2" id="a2" data-bind="value: a2" /><br />
<button data-bind="click: removeA">×</button><br />
</div>
<button data-bind="click: addA">+</button>
</div>
<div id="bs">
<h1>Bs</h1>
<div data-bind="foreach: bs">
<input name="b1" id="b1" data-bind="value: b1" /><br />
<input name="b2" id="b2" data-bind="value: b2" /><br />
<button data-bind="click: removeB">×</button><br />
</div>
<button data-bind="click: addB">+</button>
</div>
JS
/* First Grid */
function A(a1, a2) {
var self = this;
self.a1 = a1;
self.a2 = a2;
}
function AsVM() {
var self = this;
self.as = ko.observableArray([
new A('', '')
]);
self.addA = function() {
self.as.push(new A('', ''));
}
self.removeA = function(a) {
self.as.remove(a);
}
}
/* Second Grid */
function B(b1, b2) {
var self = this;
self.b1 = b1;
self.b2 = b2;
}
function BsVM() {
var self = this;
self.bs = ko.observableArray([
new B('', '')
]);
self.addB = function() {
self.bs.push(new B('', ''));
}
self.removeB = function(b) {
self.bs.remove(b);
}
}
ko.applyBindings(AsVM, document.getElementById('as'));
ko.applyBindings(BsVM, document.getElementById('bs'));
于 2014-01-06T13:01:19.647 に答える