3

コレクションにJSONファイルのデータを入力しようとしています。私は背骨の初心者なので、私の問題はおそらく簡単に解決できます。しかし、これは一日中苦労してきました-それで今私は指導を求めています。

アンケートを作成していて、ローカルに保存されているJSONファイルから質問をロードしたいと思います（後でサーバーから質問を取得します）。

コレクションにデータが入力されているかどうか、またはビューが更新されないことが問題であるかどうかはわかりません。私はたくさんのチュートリアルを読み、さまざまな場所からいくつかのアイデアを得ました。

さて..これは私のjavascriptコードです：

$(function(){

var Question = Backbone.Model.extend({

    defaults: {
        q: "Empty question..."
    },

    initialize: function() {
        if (!this.get("q")) {
            this.set({"q": this.defaults.q});
        }
    }
});


var QuestionList = Backbone.Collection.extend({
    model: Question,
    url: "question.json"
});

var Questions = new QuestionList;


var QuestionView = Backbone.View.extend({

    tagName:  "li",

    template: _.template($('#item-template').html()),

    initialize: function() {
        _.bindAll(this, 'render', 'remove');
        this.model.bind('change', this.render);
    },

    render: function() {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }
});


var AppView = Backbone.View.extend({

    el: $("#questionnaire_app"),

    itemTemplate: _.template($('#item-template').html()),

    initialize: function() {
        _.bindAll(this, 'addOne', 'addAll', 'render');

        Questions.bind('reset',   this.addAll);
        Questions.fetch();
    },

    addOne: function(question) {
        var view = new QuestionView({model: question});
        this.$("#question-list").append(view.render().el);
    },

    addAll: function() {
        Questions.each(this.addOne);
    }
});

var App = new AppView;

});

そして私は次のHTMLコードを持っています：

<div id="questionnaire_app">
    <div class="title">
        <h1>Questions</h1>
    </div>
    <div class="content">
        <div id="questions">
            <ul id="question-list"></ul>
        </div>
    </div>
</div>

<script type="text/template" id="item-template">
    <div class="question">
        <div class="display">
            <p class="question-content"><%= q %></p>
        </div>
    </div>
</script>

JSONファイルは次のようになります。

[
    {
        "q": "How were your meeting with Dr. Apfelstrudel?"
    },
    {
        "q": "What do you think of the movie Die Hard 4.0"
    },
    {
        "q": "Are people from Mars really green?"
    }
]

ボーナスの質問：私はfirebugを使用していますが、このようなものをデバッグするのは非常に難しいと思います。たとえばconsole.log(Questions);コンソールに書き込むと、ReferenceErrorが発生します：質問が定義されていません。何故ですか？

更新：問題は解決しました。以前はWebサーバーを使用していませんでしたが、現在は使用しています（ブラウザーでファイルを開いただけです）。コードは正常に機能します。

4

1 に答える 1

1

私はあなたのコードをテストしました、そしてそれは私によってうまく動くようです。

編集：これはあなたのコードで動作するフィドルへのリンクです。モデルをフェッチする代わりに手動でリストを追加するように変更しました（jsfiddleでそれを複製する方法がわからないため）。おそらくあなたの問題はあなたのJSONファイルにあります（読み取り専用、間違った場所）。

firebugで参照エラーが発生する理由は、ドキュメント準備機能の最後で質問参照がスコープ外になるためです。これを何かに割り当てると、ログに記録できるようになります。

例えば

var q = {};

$(function() {

  // Your code
  var Questions = new QuestionList;
   q.Questions = Questions
 //the rest of your code
});

これで、console.log（q.Questions）;を使用してfirebugにログインできます。

于 2012-05-17T22:20:16.447 に答える