knockout.js - 在一页中创建多个淘汰赛网格

Question

我想在单个页面上使用 KnockOut 框架创建多个表。

例如，在我的页面上，我可能需要显示四个用不同的 .knout 绑定的表ViewModel。

Answer 1

如果您想在页面中放置多个不同的视图模型，我建议您创建一个额外的视图模型，将视图模型保存在可观察对象中。这样，您只需要应用一次绑定，就可以在需要绑定到不同视图模型的页面元素上使用with:绑定，而无需多次绑定到 DOM 中的同一节点的风险。

这是 jsFiddle 的一个简单示例：http: //jsfiddle.net/2DD5J/

Answer 2

您可以通过使用 DIV id 添加多个视图模型来实现此目的：

<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>

Answer 3

这可以根据您的需要通过不同的方法完成：

一个视图模型具有四个集合或四个视图模型每个具有一个集合。

这是第一个：

       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>  

然而，如果你想使用四个不同的独立视图模型，你需要创建它们每个都有自己的集合，并通过 id 对它们应用敲除绑定，例如：

ko.applyBindings(new VM(), document.getElementById('ViewModel1Container'));

摆弄第一个例子。

Answer 4

我在 jsFiddle 的一页上制作了多个淘汰网格的工作示例。在这里。

我确信它可以改进，但这是我现在所拥有的。

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">&times;</button><br />
  </div>

  <button data-bind="click: addA">&plus;</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">&times;</button><br />
  </div>

  <button data-bind="click: addB">&plus;</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'));