Question

我正在使用sinatra和knockout.js构建一个简单的Web应用程序。我的基本结构是后端的模型，只返回json，并使用knockout渲染客户端。但即使我预先填充数组，我的数据也不会呈现。

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

为什么不进行渲染？

Answer 1

您的问题是您的HTML无效。您正试图在td ...

中呈现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（Knockout无法弄清楚你想要一张桌子并为你神奇地渲染它）

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

淘汰数据不渲染

1 个答案: