Данные нокаута не рендеринга

Я создаю простое веб-приложение, использующее sinatra и knockout.js. Моя базовая структура - это модель на бэкэнд, которая возвращает json, и делает все клиентские стороны, используя нокаут. Но мои данные не отображаются, даже когда я предварительно заполняю массив.Данные нокаута не рендеринга

Вот часть app.rb:

get "/" do 
     content_type 'html' 
     erb :index 
    end 
    get "/topics" do 
     @topics = Topic.all 
     @topics.to_json 
    end 
    get "/topics/:id" do 
     @topic = Topic.find(params[:id]) 
     @topic.to_json 
    end 
    post "/topics/new" do 
     @topic = Topic.new(name: params[:name], 
          description: params[:description]) 
     @topic.created_at = DateTime.now 

    end

И моя база данных:

APP_ROOT = File.expand_path(File.dirname(__FILE__)) 
    DataMapper.setup(:default, "sqlite:///#{APP_ROOT}/db.sqlite3") 
    class Topic 
     include DataMapper::Resource 
     property :id, Serial 
     property :name, Text 
     property :description, Text 
     property :created_at,  DateTime 
     property :updated_at,  DateTime 
    end 
    DataMapper.auto_upgrade!

Мои Javascript Файл:

function Topic(data){ 
    this.name = ko.observable(data.name); 
    this.description = ko.observable(data.description); 
    this.created_at = ko.observable(data.created_at); 
    this.updated_at = ko.observable(data.updated_at); 
    this.id = ko.observable(data.id); 
} 
function TopicViewModel(){ 
    var that = this; 
    that.topics = ko.observableArray([{name: "hello",description: "hi"}]); 
    $.getJSON("/topics",function(raw){ 
     var topics = $.map(raw, function(item){return new Topic(item)}); 
     that.topics(topics); 
    }); 
    that.newTopic = ko.observable(); 
     that.addTopic = function(){ 
      var newTopic = new Topic({name: "", description: ""}); 
      $.getJSON("date", function(data){ 
       newTopic.created_at(data.date); 
       newTopic.updated_at(data.date); 
       that.topics.push(newTopic); 
       that.saveTopic(newTopic); 
      }); 
     }; 
    that.saveTopic = function(topic){ 
     var t= ko.toJS(topic); 
     $.ajax({ 
      url: "http://localhost:4567/topics/new", 
      type: "POST", 
      data: t 
     }).done(function(data){ 
      topic.id(data.topic.id); 
     }); 
    } 
} 
ko.applyBindings(new TopicViewModel());

Наконец, мой HTML:

<!DOCTYPE html> 
    <html> 
    <head> 
    <link href="style.css"> 
    <title>Topics</title> 
    </head> 
    <body> 
     <div id="container"> 
      <section id="create"> 
       <h2>New Topic</h2> 
       <form id="addTopic" data-bind="submit: addTopic"> 
        <input data-bind="value: name"/> 
        <input data-bind="value: description"/> 
        <button type="submit">Create Topic</button> 
       </form> 
      </section> 
      <section id="topics"> 
       <!-- ko foreach: topics --> 
        <td data-bind="text: name"></td> 
        <td data-bind="text: description"></td> 
        <td data-bind="text: created_at"></td> 
        <td data-bind="text: updated_at"></td> 
       <!-- /ko --> 
      </section> 
      <script src="scripts/jquery.js"></script> 
      <script src="scripts/knockout.js"></script> 
      <script src="scripts/app.js"></script> 


    </body> 
    </html>

Почему этот рендеринг не является?

источник

2013-02-14 MichaelFine

Нужно ли передавать данные по каналам Синатры? (например, из запроса cURL или просто browswer). Кстати, если вы не собираетесь отображать с использованием представлений Sinatra, нет смысла использовать переменные экземпляра. – iain

Да, когда я препопыляю, что db на бэкэнде они возвращают данные. – MichaelFine

Выполняется ли метод make в вашем запросе ajax? Каковы данные, которые он получает? (используйте console.log (данные), в готовом методе). Возможно, вы пытаетесь выполнить запрос crossdomain и не задали соответствующие заголовки crossdomain. – Kasheftin

Ваша проблема в том, что ваш html недействителен. Вы пытаетесь оказать td S внутри section ...

Измените ваш td к span (или div) и он должен работать нормально:

<section id="topics"> 
    <!-- ko foreach: topics --> 
    <span data-bind="text: name"></span> 
    <span data-bind="text: description"></span> 
    <span data-bind="text: created_at"></span> 
    <span data-bind="text: updated_at"></span> 
    <!-- /ko --> 
</section>

Или построить правильный table (Нокаут не могу понять что вам нужен стол и волшебным образом сделать это для вас)

<table> 
    <thead> 
     <tr> 
      <th>name</th> 
      <th>description</th> 
      <th>created_at</th> 
      <th>updated_at</th> 
     </tr> 
    </thead> 
    <tbody> 
     <!-- ko foreach: topics --> 
     <tr> 
      <td data-bind="text: name"></td> 
      <td data-bind="text: description"></td> 
      <td data-bind="text: created_at"></td> 
      <td data-bind="text: updated_at"></td> 
     </tr> 
     <!-- /ko --> 
    </tbody> 
</table>

источник

2013-02-14 11:34:46 nemesv

Html уверен, что недействителен, но, насколько я знаю, tds в разделе должны отображаться некорректно. Но они все равно должны быть там. –

Но нокаут будет смущен, когда HTML недействителен, а иногда и ничего не получается ... Вы пытались использовать span или table? Он работает сейчас для вас? – nemesv

Данные нокаута не рендеринга

ответ

Смежные вопросы