javascript 将 JSON 提要与 Backbone JS 集成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5629972/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Integrating JSON feed with Backbone JS
提问by Nej Kutcharian
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.
我目前正在做一个项目，我在输入框中输入一个关键字，当我点击发送时，它会点击一个带有 (localhost/json-status.php?query= input text) 之类的链接的 PHP 服务器，它返回任何内容在 json 格式的“查询=”之后。现在我已经用 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(
'<div>'+
'<p>'+post.status+'</p>'+
'</div>'
);
});
});
});
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.
我几乎已经将我在 jQuery 中所做的移植到了主干 js，但到目前为止它没有按预期工作，请告诉我我的方法是否正确以及我如何解决我的问题。
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: 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 server code which returns in json format (this works fine):
以 json 格式返回的 PHP 服务器代码（这很好用）：
<?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>
Thank you for your 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");// 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;
Full HTML (part 2):
完整的 HTML（第 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>
And the PHP is still the same from the one originally documented.
并且 PHP 与最初记录的 PHP 仍然相同。
回答by Julien
As for your general design, you should use a Backbone.Modeland Collectionto fetch your statuses:
至于你的一般设计，你应该使用Backbone.Model和Collection来获取你的状态：
Status = Backbone.Model.extend();
StatusList = Backbone.Collection.extend({
model: Status,
value: null
url: function(){ return "json-status.php" + "?query=" + this.value;
});
Your view should be listening to the StatusList and not the StatusList creating a binding to the view:
您的视图应该监听 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("<div>" + model.get('status') + "</div>");
}
}
});
There is a couple of things here:
这里有几件事：
- an attribute on the model is defined by set/get not by a js attributes like you did with status
- try to decouple stuff views know about models but models do not know about views
- 模型上的属性是由 set/get 定义的，而不是像您对 status 所做的那样由 js 属性定义
- 尝试分离视图知道模型但模型不知道视图的东西
回答by Milan Korsos
FYI (from the documentation)
仅供参考（来自文档）
We've taken the opportunity to clarify some naming with the 0.5.0 release. Controller is now Router, and refresh is now reset.
我们借此机会澄清了 0.5.0 版本的一些命名。Controller 现在是 Router，refresh 现在是 reset。
So if you are using the latest version dont forget to change refreshto resetin this line:
因此，如果您使用的是最新版本，请不要忘记在此行中将refresh更改为reset：
this.status.bind("refresh", this.render);
