Question

I have got a task to do knockout.js in ruby on rails. I want to list my database values in a table format.
My Index page is

<%= javascript_include_tag "knockout-2.2.0", "knockout.simpleGrid.1.3" %>

<style type='text/css'> 
    .ko-grid { margin-bottom: 1em; width: 25em; border: 1px solid silver; background-color:White; }
    .ko-grid th { text-align:left; background-color: Black; color:White; }
    .ko-grid td, th { padding: 0.4em; }
    .ko-grid tr:nth-child(odd) { background-color: #DDD; }
    .ko-grid-pageLinks { margin-bottom: 1em; }
    .ko-grid-pageLinks a { padding: 0.5em; }
    .ko-grid-pageLinks a.selected { background-color: Black; color: White; }
    .liveExample { height:20em; overflow:auto } /* Mobile Safari reflows pages slowly, so fix the height to avoid the need for reflows */
</style>
<% @users.each do |user| %>
<script type="text/javascript">
 $(document).ready(function() {

    var initialData = [
     {name:<%= @user_names.to_json.html_safe%>, place: <%= @user_places.to_json.html_safe%> }
    ];

var PagedGridModel = function(items) {
    this.items = ko.observableArray(items);

    this.addItem = function() {
        this.items.push({ name: "New item", place: "dfgd"});
    };

    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: "Name", rowText: "name" },
            { headerText: "Place", rowText: "place" }

        ],
        pageSize: 4
    });
};

ko.applyBindings(new PagedGridModel(initialData));
    });
 </script>
 <%end%>
<div data-bind='simpleGrid: gridViewModel'> <br/></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> 

The result while running is

Name                          Place
Nithin,Vipin,Jetson     Vatakara,Calicut,Aluva

All names are came in single row and same as in the case of place.
How can i solve it?

Answer 1

In place of this

 var initialData = [
     {name:<%= @user_names.to_json.html_safe%>, place: <%= @user_places.to_json.html_safe%> }
    ];

try giving user_name one by one via iteration.

I’m not sure. will you please try this.

 $(document).ready(function() {
var initialData = new Array;
<% @users.each do |user| %>
initialData.push({name: "<%= user.name %>" , place: "<%= user.place %>" }) ;
<% end %>