0

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

なぜこのレンダリングではないのですか?

4

1 に答える 1

1

あなたの問題は、あなたのhtmlが有効でないことです。...td内で sをレンダリングしようとしています。section

(または) に変更するtdと、正常に動作するはずです。spandiv

<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>
于 2013-02-14T11:34:46.003 に答える