0

jquery-ajaxを使用してjsonから取り込まれたリストにアクセスして、バックボーンビューをレンダリングしようとしています。

私が直面している問題は、ajax 呼び出しが完了する前でもページがレンダリングされることです。データを取得した後に機能させるために、成功データ内にバックボーン モデル/ビューを含めることができるかどうかはわかりません。ajax 呼び出しを置き換えて静的 json を javascript 変数に書き込むと、これは正常に機能します。しかし、これを外部呼び出しで機能させることができません。

私が使用している方法は間違っている可能性があり、バックボーンを使用してこれを行う適切な方法が必要です。

コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script class="jsbin" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script class="jsbin" src="http://documentcloud.github.com/backbone/backbone.js"></script>

<script>
            var stages;

                $.ajax({ 
                    type: 'GET', 
                    url: 'test.php', 
                    async:'false',
                    data: { get_param: 'value' }, 
                    success: function (data) { 
                        window.stages = data;
                        alert(stages);
                    }
                });


            alert(stages);


          // StageModel: no need to extend if you're not adding anything.
          StageModel = Backbone.Model;

          // StageCollection
          StageCollection = Backbone.Collection.extend({
                model: StageModel
          });

          // create view for list of stages
          StageCollectionView = Backbone.View.extend({

            el: $("#stageNav"),

            initialize: function() {
              this.collection.bind('add', this.createStageListItem, this);
            },

            events: {
              'click .stageListItem' : 'selectStage'
            },

            createStageListItem: function(model) {
              this.$("#stageList").append("<tr><td id=\"" + model.cid + "\" class='stageListItem'>" + model.get('label')  +'</td><td>-'+ model.get('message') + "</td></tr>");
            },

            selectStage: function(event) {
              var cid = $(event.target).attr('id');
              this.trigger('new-stage', this.collection.getByCid(cid));
            },            

            render: function() {
              var self = this;
              this.collection.each(function(model) {
                self.createStageListItem(model);
              });
              return this;
            }

          });

          // StageView, 
          StageView = Backbone.View.extend({
                el: $("#stage"),              
                initialize: function(options) {
                  this.eventSource = options.newStageEventSource;
                  this.eventSource.bind('new-stage', this.loadAndRenderStage, this);
                },

                load: function(model) {
                  this.model = model;
                  return this;
                },

                render: function() {
                  $("#stageLabel").html(this.model.get('label'));  
                  $("#stageMsg").html(this.model.get('message'));
                },

                loadAndRenderStage: function(stage) {
                  this.load(stage);
                  this.render();
                }
          });

          var stageCollection = new StageCollection(stages);

          var stageCollectionView = new StageCollectionView({
            collection: stageCollection
          });

          var stageView = new StageView({
            newStageEventSource: stageCollectionView
          });

          stageCollectionView.render();

</script>

<meta charset=utf-8 />
<title>JS Bin</title>
</head>

<body>

<div id="stageNav">
<table id="stageList">
</table>
</div>

<div id="stage">
<h3 id="stageLabel"></h3>
<p id="stageMsg"></p>
</div>

</body>

</html>

どうもありがとう

ロイ

4

1 に答える 1

0

以下は、私がアプリケーションのために行ったことです。

API の正しいパス (db ファイル パス) でモデルを作成します。

//Models
var ClientReportsModel  = Backbone.Model.extend({
    urlRoot: App.apiUrl+'tracking/GetClientReport',

});

var clientReportsModel  = new ClientReportsModel();

次に、ビューで単に jquery-ajax call のようにモデルを呼び出します。

//View
var ClientReportsView = Backbone.View.extend({        
    render: function(sd,ed,uid) {
        var that = this;

            var sendData = {
              "uid" : uid,
              "pn"  : 0,
              "sd"  : sd,
              "ed"  : ed
            }
            //sendData is the input for the ajax call

            var clientReportsModel = new ClientReportsModel();
            clientReportsModel.save(sendData, {
                success: function (model, result) {
                    alert("Success");                      
                },
                error: function (res) {
                    alert("Fail"); 
                }
            });
    }
});

通常の jquery-ajax 呼び出しと同じように、結果はsuccess callback function.

お役に立てれば。

于 2013-10-09T12:13:44.407 に答える