集成JSON饲料与骨干JS [英] Integrating JSON feed with Backbone JS
问题描述
我目前的工作在哪里我的输入框内键入关键字，当我点击发送击中一个PHP服务器像（本地主机/ JSON-status.php？查询= 输入文本的链接项目），并返回无论是后查询=JSON格式。现在我用jQuery做到了这一点，我想在骨干JS再次做到这一点。
I'm currently working on a project where I type a keyword inside an input box and when I click send it hits a PHP server with a link like (localhost/json-status.php?query=input text) and it returns whatever is after "query=" in json format. Now I've accomplished this with jQuery and I'm trying to do this 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>'
);
});
});
});
我已经pretty多移植了我在jQuery的到骨干JS没有和它不工作了迄今为止所预期的那样，请让我知道如果我的做法是正确的，我怎么能解决我的问题。
I've pretty much ported over what I did in jQuery over to backbone js and it's not working out as expected so far, please let me know if my approach is correct and how I can solve my problem.
骨干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: 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("<div>" + model.get('status') + "</div>");
}
});
var appview = new AppView;
})(jQuery);
PHP服务器code，它返回一个JSON格式（这工作正常）：
PHP server code which returns in json format (this works fine):
<?php
$getQuery = $HTTP_GET_VARS["query"];
$json='
{"posts":[
{
"status": "' . $getQuery . '"
}
]}
';
echo $json;
?>
如果你要复制/粘贴什么我迄今为止它是：
And if you wish to copy/paste what I have so far it's:
<!DOCTYPE html>
<html>
<head>
<title>JSON Test</title>
</head>
<body>
<input value="What's on your 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: 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("<div>" + model.get('status') + "</div>");
}
});
var appview = new AppView;
})(jQuery);
</script>
</body>
</html>
感谢您的时间。
朱利安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");// 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("<div>" + model.get('status') + "</div>");
});
}
});
var appview = new AppView;
HTML全文（第二部分）：
Full HTML (part 2):
<!DOCTYPE html>
<html>
<head>
<title>JSON Test</title>
</head>
<body>
<input value="What's on your 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");// 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("<div>" + model.get('status') + "</div>");
});
}
});
var appview = new AppView;
</script>
</body>
</html>
和PHP的仍然是由原来记录了一个相同的。
And the PHP is still the same from the one originally documented.
推荐答案
至于你的总体设计，你应该使用 Backbone.Model 和集合来获取你的状态：
As for your general design, you should use a Backbone.Model and Collection to fetch your statuses:
Status = Backbone.Model.extend();
StatusList = Backbone.Collection.extend({
model: Status,
value: null
url: function(){ return "json-status.php" + "?query=" + this.value;
});
您认为应该听StatusList而不是StatusList创建一个具有约束力的观点：
Your view should be listening to the StatusList and not the StatusList creating a binding to the view:
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("<div>" + model.get('status') + "</div>");
}
}
});
有一对夫妇的东西在这里：
There is a couple of things here:
- 在模型中的属性由一组定义/获取属性没有像你那样的状态
- 尝试去耦东西的看法了解模型，但模型不知道有关视图
通过一个js
这篇关于集成JSON饲料与骨干JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
