獲取最基本的Backgrid.js示例工作

我想獲得最基本的工作的例子。換句話說，我可以將源文件夾放入我的xampp/htdocs文件夾並運行而無需執行其他任何操作。獲取最基本的Backgrid.js示例工作

我已經嘗試了很多方法讓代碼運行，但我無法獲得任何顯示。這是我嘗試查看工作示例的html頁面。

<!DOCTYPE html> 
<html> 

<head> 
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css"/> 
    <link rel="stylesheet" href="lib/backgrid.css"/> 
    <script src="jquery-1.10.2.min.js"></script> 
    <script src="underscore-min.js"></script> 
    <script src="backbone-min.js"></script> 
    <script src="lib/backgrid.js"></script> 
</head> 

<body> 
<div id="grid"> 
    <script type="text/javascript"> 
     var Territory = Backbone.Model.extend({}); 

     var Territories = Backbone.Collection.extend({ 
      model: Territory, 
      url: "territories.json" 
     }); 

     var territories = new Territories(); 

     var columns = [{ 
      name: "id", // The key of the model attribute 
      label: "ID", // The name to display in the header 
      editable: false, // By default every cell in a column is editable, but *ID* shouldn't be 
      // Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s. 
      cell: Backgrid.IntegerCell.extend({ 
       orderSeparator: '' 
      }) 
     }, { 
      name: "name", 
      label: "Name", 
      // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string 
      cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up 
     }, { 
      name: "pop", 
      label: "Population", 
      cell: "integer" // An integer cell is a number cell that displays humanized integers 
     }, { 
      name: "percentage", 
      label: "% of World Population", 
      cell: "number" // A cell type for floating point value, defaults to have a precision 2 decimal numbers 
     }, { 
      name: "date", 
      label: "Date", 
      cell: "date" 
     }, { 
      name: "url", 
      label: "URL", 
      cell: "uri" // Renders the value in an HTML anchor element 
     }]; 

     // Initialize a new Grid instance 
     var grid = new Backgrid.Grid({ 
      columns: columns, 
      collection: territories 
     }); 

     // Render the grid and attach the root to your HTML document 
     $("#example-1-result").append(grid.render().el); 

     // Fetch some countries from the url 
     territories.fetch({reset: true}); 
    </script> 
</div> 
</body> 

</html>

感謝您的時間！

來源

2014-04-02 CodeGuyRoss

你似乎加入電網不存在的元素：

$("#example-1-result").append(grid.render().el);

使用$("#grid")代替，你應該看到的結果。

來源

2014-04-07 23:43:56 pesatu

獲取最基本的Backgrid.js示例工作

回答

相關問題