将JSON提要与Backbone JS集成

我正在开发一个项目，我在输入框中键入一个关键字，当我点击发送它时会点击一个带有类似（localhost / json-status.php？query = input text ）的链接的PHP服务器，它会返回任何内容在json格式的“query =”之后。 现在我用jQuery完成了这个，我试图在骨干js中再次这样做。

$("#updateStatus").click(function(){ var query = $("#statusBar").val(); var url = "json-status.php" + "?query=" + query; $.getJSON(url,function(json){ $.each(json.posts,function(i,post){ $("#content").append( '
'+ '
'+post.status+'
'+ '
' ); }); }); }); 

我已经将我在jQuery中所做的工作移植到了骨干网上，并且到目前为止它没有达到预期的效果，如果我的方法是正确的以及如何解决我的问题，请告诉我。

骨干代码：

 (function ($) { Status = Backbone.Model.extend({ status: null }); StatusList = Backbone.Collection.extend({ initialize: function (models, options) { this.bind("add", options.view.addStatusList); } }); AppView = Backbone.View.extend({ el: $("body"), initialize: function () { this.status = new StatusList( null, { view: this }); }, events: { "click #updateStatus": "getStatus", }, getStatus: function () { var url = "json-status.php" + "?query=" + $("#statusBar").val(); var statusModel; $.getJSON(url,function(json){ $.each(json.posts,function(i,post){ statusModel = new Status({ status: post.status }); this.status.add( statusModel ); }); }); }, addStatusList: function (model) { $("#status").prepend("
" + model.get('status') + "
"); } }); var appview = new AppView; })(jQuery); 

以json格式返回的PHP服务器代码（这很好）：

如果您希望复制/粘贴到目前为止我所拥有的内容：

       Update Status 
 
     $("#statusBar").click(function() { $(this).val(""); }); (function ($) { Status = Backbone.Model.extend({ status: null }); StatusList = Backbone.Collection.extend({ initialize: function (models, options) { this.bind("add", options.view.addStatusList); } }); AppView = Backbone.View.extend({ el: $("body"), initialize: function () { this.status = new StatusList( null, { view: this }); }, events: { "click #updateStatus": "getStatus", }, getStatus: function () { var url = "json-status.php" + "?query=" + $("#statusBar").val(); var statusModel; $.getJSON(url,function(json){ $.each(json.posts,function(i,post){ statusModel = new Status({ status: post.status }); this.status.add( statusModel ); }); }); }, addStatusList: function (model) { $("#status").prepend("
" + model.get('status') + "
"); } }); var appview = new AppView; })(jQuery);    

感谢您的时间。

---

朱利安的代码。

 StatusList = Backbone.Collection.extend({ model: Status, value: null, url: function(){ return "json-status.php?query=" + this.value;} }); AppView = Backbone.View.extend({ el: $("body"), initialize: function () { _.bindAll(this, "render");// to solve the this issue this.status = new StatusList( null, { view: this }); this.status.bind("refresh", this.render); }, events: { "click #updateStatus" :"getStatus", }, getStatus: function () { this.status.value = $("#statusBar").val(); this.status.fetch(this.status.value); }, render: function () { var statusEl = $("#status"); this.status.each( function(model) { statusEl.prepend("
" + model.get('status') + "
"); }); } }); var appview = new AppView; 

完整的HTML（第2部分）：

        Update Status 
 
     $("#statusBar").click(function() { $(this).val(""); }); Status = Backbone.Model.extend(); StatusList = Backbone.Collection.extend({ model: Status, value: null, url: function(){ return "json-status.php?query=" + this.value;} }); AppView = Backbone.View.extend({ el: $("body"), initialize: function () { _.bindAll(this, "render");// to solve the this issue this.status = new StatusList( null, { view: this }); this.status.bind("refresh", this.render); }, events: { "click #updateStatus" :"getStatus", }, getStatus: function () { this.status.value = $("#statusBar").val(); this.status.fetch(this.status.value); }, render: function () { var statusEl = $("#status"); this.status.each( function(model) { statusEl.prepend("
" + model.get('status') + "
"); }); } }); var appview = new AppView;    

PHP与最初记录的PHP仍然相同。

Answer 1

至于您的一般设计，您应该使用Backbone.Model和Collection来获取您的状态：

 Status = Backbone.Model.extend(); StatusList = Backbone.Collection.extend({ model: Status, value: null url: function(){ return "json-status.php" + "?query=" + this.value; }); 

您的视图应该是侦听StatusList而不是StatusList创建绑定到视图：

 AppView = Backbone.View.extend({ el: $("body"), initialize: function () { _.bindAll(this, "render");// to solve the this issue this.status = new StatusList( null, { view: this }); this.status.bind("refresh", this.render); }, events: { "click #updateStatus": "getStatus", }, getStatus: function () { this.status.value = $("#statusBar").val(); this.status.fetch() }, render: function () { var statusEl = $("#status") this.status.each( function(model){ statusEl.prepend("
" + model.get('status') + "
"); } } }); 

这里有几件事：

• 模型上的属性由set / get定义，而不是像js属性那样定义
• 尝试将看法知道模型的东西解耦，但模型不了解视图

Answer 2

仅供参考（来自文档）

我们借此机会澄清了0.5.0版本的一些命名。 控制器现在是路由器， 现在重置刷新 。

因此，如果您使用的是最新版本，请不要忘记更改刷新以重置此行：

 this.status.bind("refresh", this.render);