javascript - Integrating JSON feed with Backbone JS -
i'm working on project type keyword inside input box , when click send hits php server link (localhost/json-status.php?query=input text) , returns whatever after "query=" in json format. i've accomplished jquery , i'm trying again in backbone 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( '<div>'+ '<p>'+post.status+'</p>'+ '</div>' ); }); }); }); i've pretty ported on did in jquery on backbone js , it's not working out expected far, please let me know if approach correct , how can solve problem.
backbone code:
(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: }); }, 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("<div>" + model.get('status') + "</div>"); } }); var appview = new appview; })(jquery); php server code returns in json format (this works fine):
<?php $getquery = $http_get_vars["query"]; $json=' {"posts":[ { "status": "' . $getquery . '" } ]} '; echo $json; ?> and if wish copy/paste have far it's:
<!doctype html> <html> <head> <title>json test</title> </head> <body> <input value="what's on mind?" id="statusbar" /><button id="updatestatus">update status</button> <div id="content"> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script> <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script> <script type="text/javascript"> $("#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: }); }, 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("<div>" + model.get('status') + "</div>"); } }); var appview = new appview; })(jquery); </script> </body> </html> thank time.
julien's code.
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");// solve issue this.status = new statuslist( null, { view: }); 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("<div>" + model.get('status') + "</div>"); }); } }); var appview = new appview; full html (part 2):
<!doctype html> <html> <head> <title>json test</title> </head> <body> <input value="what's on mind?" id="statusbar" /> <button id="updatestatus">update status</button> <div id="status"> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script> <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script> <script type="text/javascript"> $("#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");// solve issue this.status = new statuslist( null, { view: }); 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("<div>" + model.get('status') + "</div>"); }); } }); var appview = new appview; </script> </body> </html> and php still same 1 documented.
as general design, should use backbone.model , collection fetch statuses:
status = backbone.model.extend(); statuslist = backbone.collection.extend({ model: status, value: null url: function(){ return "json-status.php" + "?query=" + this.value; }); your view should listening statuslist , not statuslist creating binding view:
appview = backbone.view.extend({ el: $("body"), initialize: function () { _.bindall(this, "render");// solve issue this.status = new statuslist( null, { view: }); 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("<div>" + model.get('status') + "</div>"); } } }); there couple of things here:
- an attribute on model defined set/get not js attributes did status
- try decouple stuff views know models models not know views
Comments
Post a Comment