Question

我对Knockoutjs还是陌生的，他试图基于github repo中的库构建可重用的组件。

请在html＆knockout组件代码下面找到，试图理解该问题，不确定为什么要渲染该组件：

有人可以帮我纠正这个问题，以渲染网格组件吗？

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Simple Grid (Client-Side Data)</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
  <script src="https://rawgit.com/benschulz/ko-grid-bundle/master/dist/ko-grid-bundle.js"></script>
  <link rel="stylesheet" href="https://rawgit.com/benschulz/ko-grid-bundle/master/dist/ko-grid-bundle.css">

</head>

<main style="padding: 1em;">

  <greeter params='
    GridConfiguration: {
      Columns: [
        { id: "name", width: "150px", label: "Name" },
        { id: "age", width: "70px", label: "Age" },
        { id: "email", width: "250px", label: "E-Mail" }
    ],
	Data: [
            {id: "alice", name: "Alice", age: 26, email: "alice@example.org"},
            {id: "bob", name: "Bob", age: 32, email: "bob@example.org"},
            {id: "carol", name: "Carol", age: 44, email: "carol@example.org"},
            {id: "dan", name: "Dan", age: 19, email: "dan@example.org"},
            {id: "emma", name: "Emma", age: 25, email: "emma@example.org"},
            {id: "felix", name: "Felix", age: 34, email: "felix@example.org"}
        ]
    }'></greeter>


</main>
<script type="text/javascript">
(function(){
ko.components.register('greeter', {

  template: "<div id='no-requirejs' style='display: inline-block;' data-bind='gridObject'></div>",
  viewModel: function(params) {
    var self = this;
    self.gridObject = ko.observable();
    self.gridObject.config = ko.observable();
    self.gridObject.dataSource = ko.observable();
    self.gridObject.columns = ko.observableArray();
    self.gridObject.primaryKey = ko.observable();
    window.ko.bindingHandlers.grid.config = {};
    window.ko.bindingHandlers.grid.config['example-config'] = {
      extensions: {
        filtering: {},
        sorting: {}
      }
    };

    var bundle = window['ko-grid-bundle'];


    var idSelector = function(e) {
      return e.id;
    };
    var dataSource = new bundle.dataSource.ClientSideDataSource(idSelector);

    dataSource.addEntries([{
        id: 'alice',
        name: 'Alice',
        age: 26,
        email: 'alice@example.org'
      },
      {
        id: 'bob',
        name: 'Bob',
        age: 32,
        email: 'bob@example.org'
      },
      {
        id: 'carol',
        name: 'Carol',
        age: 44,
        email: 'carol@example.org'
      },
      {
        id: 'dan',
        name: 'Dan',
        age: 19,
        email: 'dan@example.org'
      },
      {
        id: 'emma',
        name: 'Emma',
        age: 25,
        email: 'emma@example.org'
      },
      {
        id: 'felix',
        name: 'Felix',
        age: 34,
        email: 'felix@example.org'
      }
    ]);

    self.gridObject = {
      dataSource: dataSource,
      primaryKey: 'id',
      columns: params.GridConfiguration.Columns,
      config: 'example-config'

    };
  }
});
ko.applyBindings();
})();
</script>


</body>

</html>

Knockout.js组件绑定不起作用

0 个答案: