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 调用一样：

//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 回答