javascript - template - backbonejs github
Integración de la alimentación JSON con Backbone JS (2)
En cuanto a su diseño general, debe usar un Backbone.Model y Collection para obtener sus estados:
Status = Backbone.Model.extend();
StatusList = Backbone.Collection.extend({
model: Status,
value: null
url: function(){ return "json-status.php" + "?query=" + this.value;
});
Su vista debería estar escuchando StatusList y no StatusList creando un enlace a la vista:
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>");
}
}
});
Hay un par de cosas aquí:
- un atributo en el modelo está definido por set / get no por atributos js como lo hizo con el estado
- tratar de desacoplar cosas que las opiniones conocen sobre los modelos pero los modelos no las conocen
Actualmente estoy trabajando en un proyecto en el que escribo una palabra clave dentro de un cuadro de entrada y cuando hago clic en enviarlo, llega a un servidor PHP con un enlace como (localhost / json-status.php? Query = entrada de texto ) y devuelve lo que sea después de "query =" en formato json. Ahora lo he logrado con jQuery y estoy intentando hacer esto de nuevo en el 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>''
);
});
});
});
He pasado bastante de lo que hice en jQuery a backbone js y hasta ahora no está funcionando como esperaba, por favor avíseme si mi enfoque es correcto y cómo puedo resolver mi problema.
código de red troncal:
(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);
Código de servidor PHP que devuelve en formato json (esto funciona bien):
<?php
$getQuery = $HTTP_GET_VARS["query"];
$json=''
{"posts":[
{
"status": "'' . $getQuery . ''"
}
]}
'';
echo $json;
?>
Y si desea copiar / pegar lo que tengo hasta ahora, es:
<!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>
Gracias por tu tiempo.
El código de Julien
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 completo (parte 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>
Y el PHP sigue siendo el mismo que el originalmente documentado.
FYI (de la documentación)
Aprovechamos la oportunidad para aclarar algunos nombres con la versión 0.5.0. El controlador ahora es enrutador, y la actualización ahora se reinicia .
Entonces, si está utilizando la última versión, no olvide cambiar la actualización para restablecerla en esta línea:
this.status.bind("refresh", this.render);