Share
SproutCore es un marco de JavaScript revolucionario para crear aplicaciones de clase de escritorio del lado del cliente que se ejecutan en el navegador. Este tutorial le presentará los conceptos básicos de SproutCore mediante el desarrollo de un Twitter simple como un microblog..
Este tutorial contiene tanto un screencast como un tutorial escrito.!
SproutCore, a diferencia de jQuery, que es principalmente una biblioteca DOM, es un marco MVC para aplicaciones de clase de escritorio del lado del cliente escritas en JavaScript y muy influenciadas por Cocoa (marco de desarrollo Mac OSX de Apple). Se diferencia de otras bibliotecas de JavaScript porque se centra en proporcionar todas las herramientas necesarias para crear una aplicación de escritorio completa en el navegador, como enrutamiento, controladores de vista, componentes de IU, capa de almacén de datos, prueba de unidades y herramientas de implementación. Usar SproutCore significa mover el lado del cliente de la lógica de negocios, lo que reduce significativamente la latencia porque su aplicación solo necesita acceder al servidor para obtener datos (y para realizar la lógica del negocio, es posible que no desee el lado del cliente).
Usar SproutCore significa mover el lado de su cliente de lógica de negocios, lo que reduce significativamente la latencia
SproutCore se distribuye como una gema. Para instalar SproutCore, simplemente ejecuta sudo gema instalar sproutcore en la Terminal (otras formas de instalar SproutCore se pueden encontrar aquí). A pesar de que SproutCore es un RubyGem y viene con un servidor de desarrollo, una vez implementado, SproutCore no es más que HTML puro, JavaScript y CSS. Para crear una aplicación con SproutCore, usa JavaScript para definir, vistas que utilizan elementos de UI agrupados proporcionados por SproutCore o vistas personalizadas. Estos elementos de la interfaz de usuario representan el HTML para nosotros, y luego con el marco CSS de SproutCore, llamado Oportunidad, Podemos diseñar la interfaz de usuario. Usando controladores, podemos conectar estas vistas a los datos de la aplicación. Por último, utilizando el modelo DataSource de SproutCore, conectaremos la aplicación a CouchDB..
Accentsconagua
microblog sc-init creando la aplicación base SproutCore.microblog cdservidor sc que inicia el servidor de desarrollo SproutCore.http: // localhost: 4020 / microblog en su navegador y debería ver "¡Bienvenido a SproutCore!" (Nota: no tendrá que reiniciar el servidor SC cada vez que realice cambios en su fuente, simplemente actualice la ventana del navegador).
Revisemos cada archivo en la fuente de SproutCore generada y expliquemos lo que hace cada parte. El código fuente comienza en el aplicaciones / microblog carpeta.
Antes de que podamos comenzar a construir la interfaz de usuario, la aplicación SproutCore necesita algunos datos. Empecemos definiendo el modelo. SproutCore viene con un generador de modelo práctico. correr sc-gen modelo Microblog.posts para generar los archivos JavaScript del modelo base para los objetos posteados. Necesitamos informar a SproutCore sobre los datos específicos que contendrán los objetos de la publicación. Seguir adelante y abrir aplicaciones / microblog / modelos / posts.js y agrega los atributos debajo.
Microblog.Posts = SC.Record.extend (/ ** @scope Microblog.Posts.prototype * / post: SC.Record.attr (String), publicado: SC.Record.attr (Number));
Microblog.publicaciones se extiende SC.Registro y nombra los datos en los que los objetos de la publicación deben contener. Utilizamos los métodos proporcionados por SproutCore para definir los tipos de datos que esperamos en cada atributo..
En este tutorial, inicialmente usaremos Fixtures para poblar nuestro modelo en lugar de complicarnos con un servidor backend todavía. A lo largo del artículo, si realizamos cambios en los datos de la aplicación a través de la interfaz de usuario, no persistir si volvemos a cargar la aplicación, hasta que hayamos agregado la persistencia de datos, a través de CouchDB. Abierto aplicaciones / microblog / fixtures / posts.js donde especificaremos algunos datos ficticios; inserte los datos como abajo.
sc_require ('modelos / mensajes'); Microblog.Publicaciones.FIXTURES = [guid: 1, post: "Wow, Nettuts rocks!", Publicado: 1297986988, guid: 2, post: "El MobileMe de Apple se creó utilizando SproutCore", publicado: 1297987009, guid : 3, post: "Revisa este increíble marco de aplicación de JavaScript llamado SproutCore", publicado: 1298159746]; Para verificar que nuestro modelo funciona correctamente, podemos llamar a los métodos de datos de SproutCore desde una consola de JavaScript. Recarga la página, abre la consola y ejecuta. posts = Microblog.store.find (Microblog.Posts). Esto debería cargar todos los accesorios de las publicaciones en la variable de publicaciones. Necesitamos iterar la variable de publicaciones con SproutCore conseguir cada Método para ver cualquier cosa útil. Ejecutar posts.getEach ('post') para ver todos los mensajes.
Vamos a avanzar un poco ahora y construir la interfaz de usuario. La razón para hacerlo es porque SproutCore utiliza el enlace de datos para adjuntar los valores de los elementos de la interfaz de usuario a los objetos de JavaScript; El resultado de estos enlaces es que los valores en los objetos de JavaScript enlazados se insertan en el HTML como cabría esperar, pero con una diferencia: se establece un vínculo entre su valor y el objeto. Cualquier actualización posterior del objeto en el JavaScript se reflejará automáticamente en la interfaz de usuario. Por lo tanto, primero vamos a construir la IU y luego implementaremos un controlador para vincular los datos a esa IU. Empecemos: abre el recursos / main_page.js archivo, y demos a nuestra aplicación una barra de herramientas de navegación de nivel superior y una vista de lista.
Microblog.mainPage = SC.Page.design (mainPane: SC.MainPane.design (childViews: 'topView postView contentView'.w (), // el método auxiliar de SC divide la cadena en la matriz. TopView: SC.ToolbarView.design ( layout: top: 0, left: 0, right: 0, height: 40, anchorLocation: SC.ANCHOR_TOP), postView: SC.View.design (childViews: 'form'.w (), layout: arriba: 40, altura: 75, fondoColor: 'blanco', forma: SC.View.design (layout: izquierda: 200, derecha: 200, fondoColor: "negro")), contentView: SC .ScrollView.design (hasHorizontalScroller: NO, layout: top: 115, bottom: 0, left: 0, right: 0, contentView: SC.ListView.design ())));
Su aplicación SproutCore puede tener más de una página, pero aquí puede ver que hemos definido solo una página. Dentro de esta página, definimos tres vistas secundarias; Los hemos definido tanto en el visitas infantiles atributo y luego se especifican sus contenidos dentro del objeto. los vista superior definimos como un ToolbarView y anclarlo a la parte superior de la página. Notarás que no hemos especificado un ancho; esto realmente le dice a SproutCore que queremos que llene el espacio disponible y que cambie de tamaño con la ventana del navegador.
A continuación, el PostView nos definimos como un estándar Ver, que es de ancho completo, y le dan una única vista secundaria formar. Esto contendrá el formulario de publicación de microblog. No especificamos un ancho, pero ordenamos que la vista sea de 200 píxeles desde la derecha y 200 píxeles desde la izquierda, lo que hace que la vista sea más estrecha que la ventana del navegador, pero manteniendo la funcionalidad de cambio de tamaño automático. El contenido principal vive en. contentView, que hemos definido como una ScrollView. El contenido de este ScrollView será un Vista de la lista, que contendrá nuestras publicaciones de microblog.
Ahora que hemos terminado el diseño inicial, agreguemos un formulario para permitir que un usuario agregue publicaciones.
Microblog.mainPage = SC.Page.design (mainPane: SC.MainPane.design (childViews: 'topView postView contentView'.w (), // el método auxiliar de SC divide la cadena en la matriz. TopView: SC.ToolbarView.design ( childViews: "appName" .w (), layout: top: 0, left: 0, right: 0, height: 40, anchorLocation: SC.ANCHOR_TOP, appName: SC.LabelView.design (layout: top : 5, izquierda: 5, ancho: 100, displayValue: "Microblog App", layerId: "mb-logo" // atributo ID de HTML)), postView: SC.View.design (childViews: 'form' .w (), layout: top: 40, height: 150, backgroundColor: 'white', form: SC.View.design (childViews: 'postContent post'.w (), layout: left: 200, derecha: 200, postContenido: SC.TextFieldView.design (layout: arriba: 10, izquierda: 10, derecha: 10, altura: 60, isTextArea: SI, sugerencia: "¿Qué tienes en mente?"), post: SC.ButtonView.design (layout: top: 80, right: 10, width: 100, título: "Post", isDefault: YES))), contentView: SC.ScrollView.design ( hasHorizontalScroller: NO, diseño: arriba: 150, bot tom: 0, izquierda: 0, derecha: 0, contentView: SC.ListView.design ())));
Lo primero que hemos añadido es un SC.LabelView a la barra de herramientas con el título "Aplicación de microblog". A continuación, hemos modificado el formar subvista para incluir dos vistas de niño, primero Publicar Contenido, el cual es un SC.TextFieldView y habilitado isTextArea Lo que hace que sea un área de texto multilínea. En segundo lugar, hemos añadido un SC.ButtonView, que asignaremos una acción que agregará la publicación cuando se haga clic. Estos dos son elementos estándar de la interfaz de usuario de SproutCore. SproutCore tiene un completo catálogo de interfaz de usuario integrado, eche un vistazo al ejemplo del fregadero de la cocina para tener una idea de lo que está incluido. Todos estos elementos pueden ser temáticos con CSS usando el marco de temas de SproutCore.
Vamos a unir los datos de mensajes en el Microblog.Publicaciones.FIXTURES al SC.ListView Dentro de la aplicación para que podamos ver las publicaciones. Primero necesitamos crear un controlador. Ejecute el generador SproutCore como se muestra abajo para producir un repetitivo SC.ArrayController.
sc-gen controlador Microblog.postsController SC.ArrayController
No necesitamos hacer nada con los archivos del controlador generado en este momento, por lo que vamos a dejarlos en paz. SC.ArrayController y SC.ObjectController en realidad actúan como proxies a sus contenidos bajo el capó de SproutCore. Puede enlazar directamente al controlador como si estuviera vinculando a su contenido. Como verá en un momento, estableceremos el contenido de este controlador en las publicaciones. Este contenido de los controladores (las publicaciones) estará vinculado a la SC.ListView, que los mostrará. Debido a que el controlador actúa como un proxy, podemos establecer una nueva serie de publicaciones en el contenido de los controladores (por ejemplo, las publicaciones 10 a 20) y la interfaz de usuario se actualizará automáticamente. Cualquier cambio que se realice en el conjunto de datos subyacentes (la matriz de publicaciones) se reflejará automáticamente en la interfaz de usuario.
Ahora tenemos que decirle a la vista sobre este controlador y crear el enlace. Abierto main_page.js donde vive todo el código de vista y ajustar el contentView a continuación.
contentView: SC.ScrollView.design (hasHorizontalScroller: NO, layout: top: 150, bottom: 0, left: 0, right: 0, contentView: SC.ListView.design (contentBinding: "Microblog.postsController.arrangedObjects ", selectionBinding:" Microblog.postsController.selection "))
Ahora la interfaz de usuario está vinculada a los contenidos de Microblog.postsController. Recuerda: puestos de control Actúa como proxy de su contenido. Por el momento, si ejecutamos la aplicación, no tenemos ningún conjunto de datos en puestos de control y, así, la SC.ListView todavía está vacío. Necesitamos poner datos en el controlador, lo haremos tan pronto como se inicie la aplicación, así que abra main.js y agrega lo siguiente a la función principal.
var posts = Microblog.store.find (Microblog.Posts); Microblog.postsController.set ("contenido", publicaciones); Vuelva a cargar el navegador, y debería ver algo como la imagen a continuación:
En este momento, el SC.ListView representa cada objeto de publicación como una cadena, no es particularmente útil para los usuarios. En este paso, vamos a ampliar SC.View para proporcionar nuestra propia vista / html para cada fila en el SC.ListView.
primero, abrir la Terminal y discos compactos a su directorio de aplicaciones y ejecute:
sc-gen view Microblog.PostListView
Cambie la plantilla de vista generada para que se vea a continuación:
Microblog.PostListView = SC.View.extend (/ ** @scope Microblog.PostListView.prototype * / publishDateAsString: function (timestamp) var date = SC.DateTime.create (timestamp), ahora = SC.DateTime.create ( ), dateFormat = "% d /% m", dateStr; if (SC.DateTime.compareDate (date, now)> = 0) dateStr = "Today"; else dateStr = date.toFormattedString (dateFormat); return dateStr + "@" + date.toFormattedString ("% H:% M:% S");, render: function (context) var content = this.get ("content"), post = content.get (" post "); var context = context.begin (). addClass (" microblog-post "); context.push ("", publicar,"
"); context.push ("", this.publishedDateAsString (content.get (" publicado ") * 1000),""); context.end (); sc_super ();); los publicadoDateAsString () método es un ayudante que compara la fecha publicada con la fecha de hoy y devuelve "Hoy a las 12:00:00" en lugar de "17/03 a las 12:00:00". Utiliza SproutCore's. SC.DateTimeTime Objeto para formatear y comparar las fechas. Eche un vistazo a la documentación de la API para obtener más información sobre este objeto. los hacer La función es donde definimos nuestra vista personalizada y su HTML. Pasado a la función de renderizado es el renderizado de las vistas. contexto. La función de renderización se llama inicialmente cuando se dibuja la vista y después de cualquier actualización posterior de los datos. En la parte superior de la función de procesamiento obtenemos el objeto de contenido de esta fila de vista de lista y los datos de publicación. Entonces, comenzamos nuestro contexto de representación con context.begin (), que define un nuevo contenedor div.
También estamos agregando una nueva clase CSS a este div microblog-post utilizando addClass (). Dentro de este contexto, empujamos dos elementos más., que contiene el post y , que utiliza el publicadoDateAsString () Para formatear la fecha de publicación. Nota: almacenamos la fecha en segundos y, antes de pasar la fecha publicada a publicadoDateAsString (), Lo convertimos a milisegundos. Una vez que hemos completado los intervalos de la fila de vista de lista única, llamamos context.end (), que cierra el contexto de render y sc_super () llamar a los super hacer() método.
Siguiente, necesitamos decirle al SC.ListView para utilizar la fila de vista de lista personalizada que hemos definido. Abierto main_page.js y cambiar el contentView a continuación:
contentView: SC.ScrollView.design (hasHorizontalScroller: NO, layout: top: 150, bottom: 0, left: 0, right: 0, backgroundColor: "white", contentView: SC.ListView.design (layout: izquierda: 200, derecha: 200, contentBinding: "Microblog.postsController.arrangedObjects", selectionBinding: "Microblog.postsController.selection", exampleView: Microblog.PostListView, rowHeight: 60)))
los exampleView el atributo se enlaza con el objeto de vista personalizada y se usa cuando se representan las filas de vista de lista. También hemos dado el SC.ListView el mismo margen derecho e izquierdo.
Conectemos el formulario para que, cuando se envíe una nueva publicación, se cree un objeto. Abierto controladores / posts.js, que contiene Microblog.postsController y agregar otro método llamado addPost al controlador como se define a continuación.
Microblog.postsController = SC.ArrayController.create (/ ** @scope Microblog.postsController.prototype * / addPost: function () var postField = Microblog.mainPage.mainPane.get ("contentField"), postContent = postField.getFieldValue (), publish = new Date (). getTime () / 1000; var newPost = Microblog.store.createRecord (Microblog.Posts, post: postContent, publicado: publicado); postField.setFieldValue ("); // Rest el valor del campo post. return SÍ;); En este método, utilizamos una SC.outlet para obtener el valor de la SC.TextFieldView dentro de nuestra interfaz de usuario y cree un nuevo registro utilizando el DataSource de SproutCore del tipo Microblog.publicaciones. Después de crear el objeto, restablecemos el valor del campo a una cadena vacía.
Siguiente, abrir main_page.js y enganchar el botón "Publicar" a la addPost método en el controlador.
post: SC.ButtonView.design (layout: top: 80, right: 10, width: 100, title: "Post", isDefault: YES, target: "Microblog.postsController", action: "addPost")
Definimos el atributo de destino como el Microblog.postsController, Y la acción es el nuevo método. addPost en ese controlador.
Finalmente, Para que todo funcione, necesitamos definir una SC.outlet sobre el mainpane objeto para que el addPost método puede acceder a la SC.TextFieldView Objeto dentro de la vista. Agregue la siguiente propiedad a Microblog.mainPage.mainPane, que define una salida llamada contentField.
contentField: SC.outlet ("postView.form.postContent"), El código final dentro de main_page.js Debe aparecer como se muestra a continuación:
Microblog.mainPage = SC.Page.design (mainPane: SC.MainPane.design (contentField: SC.outlet ("postView.form.postContent"), childViews: 'topView postView contentView'.w (), // SC el método auxiliar divide la cadena en la matriz. topView: SC.ToolbarView.design (childViews: "appName" .w (), layout: top: 0, left: 0, right: 0, height: 40, anchorLocation: SC. ANCHOR_TOP, appName: SC.LabelView.design (layout: top: 5, left: 5, width: 100, displayValue: "Microblog App", layerId: "mb-logo" // atributo ID de HTML)) , postView: SC.View.design (childViews: 'form'.w (), layout: top: 40, height: 150, backgroundColor:' white ', form: SC.View.design (childViews:' postContent post'.w (), layout: left: 200, right: 200, postContent: SC.TextFieldView.design (layout: top: 10, left: 10, right: 10, height: 60, isTextArea : SÍ, fieldKey: "contenido", sugerencia: "¿Qué tienes en mente?"), Post: SC.ButtonView.design (layout: top: 80, right: 10, width: 100, title: "Post ", isDefault: YES, target:" Microblog.p ostsController ", action:" addPost "))), contentView: SC.ScrollView.design (hasHorizontalScroller: NO, layout: top: 150, bottom: 0, left: 0, right: 0, backgroundColor: "blanco", contentView: SC.ListView.design (layout: left: 200, right: 200, contentBinding: "Microblog.postsController.arrangedObjects", selectionBinding: "Microblog.postsController.selection", exampleView: Microblog.PostListView , rowHeight: 60)))); Después de realizar estos ajustes, vuelva a cargar el navegador y comience a agregar publicaciones..
En este momento, los datos que cargamos en nuestra aplicación provienen de accesorios codificados. Estos son perfectos para las pruebas pero no son adecuados para la producción, porque los cambios que hacemos no persisten. SproutCore utiliza SC.DataSource para interactuar con un almacén de datos del lado del servidor. Está configurado de forma predeterminada para usar una API siguiendo la convención REST. En este paso, vamos a ampliar SC.DataSource y anular métodos clave que nos permiten usar CouchDB. CouchDB tiene una interfaz API REST lista para usar, por lo que es naturalmente un ajuste perfecto para SproutCore SC.DataSource. Para obtener más información sobre CouchDB, consulte esta excelente introducción de CouchDB en Nettuts +. Solo necesitamos hacer algunas modificaciones en nuestro. SC.DataSource para permitir que SproutCore maneje el sistema de revisión de CouchDB y un esquema de URL ligeramente diferente. Empecemos configurando la base de datos..
microblog.function (doc) if (doc.post && doc.published) emit (doc._id, doc);
Si algo de esto no le es familiar, le recomiendo que consulte la introducción de CouchDB en Nettuts+.
Ahora que tenemos la configuración de nuestra base de datos, estamos listos para extender SC.DataSource. Usando el terminal, ejecute el siguiente comando desde su directorio raíz de aplicaciones.
Fuente de datos sc-gen Microblog.PostsDataSource
Ahora deberíamos tener un boilerplate SC.DataSource dentro data_sources / posts.js. Abre este archivo. Primero, necesitamos definir una consulta para recuperar nuestros datos. En la cima de data_sources / posts.js y fuera de la Microblog.PublicacionesDataSource construye, agrega el código detallado abajo.
sc_require ('modelos / mensajes'); Microblog.POSTS_QUERY = SC.Query.local (Microblog.Posts, orderBy: 'publish DESC'); Esto define una consulta personalizada que garantizará que recibamos todas las publicaciones y las ordenemos por fecha de publicación.. Siguiente, añadir algunos métodos de ayuda a la SC.DataSource subclase como se define abajo.
// DB nombre _dbname: "microblog", getPath: function (resource) return "/"+this._dbname+"//"+resource; , getView: function (view, queryString) return "/"+this._dbname+"/_design/"+view+"/_view/"+view+"/?"+queryString; ,
Como puede ver, almacenamos el nombre de la base de datos en una variable "privada". Usted podría agregar un cierre si desea ser exhaustivo. los getPath () y getView () Las funciones resumen el recurso al mapeo de la ruta. Podemos llamar getView () con cualquier nombre de vista y obtenga la URL correcta para ese recurso en la instancia de CouchDB.
Ahora, vamos a implementar algunos métodos para recuperar las publicaciones de CouchDB. Enmendar el ha podido recuperar() método y añadir didFetchPosts () como se detalla a continuación.
fetch: función (tienda, consulta) si (consulta === Microblog.POSTS_QUERY) SC.Request.getUrl (this.getView ("posts", "descending = true")). json () .header ("Accept "," application / json ") .notify (this," didFetchPosts ", store, query) .send (); devuelve SÍ; devuelve NO; , didFetchPosts: function (res, store, query) if (SC.ok (res)) var couchResponse = SC.json.decode (res.get ('encodedBody')), posts = couchResponse.rows.getEach ( "value") ids = couchResponse.rows.getEach ("key"); store.loadRecords (Microblog.Posts, posts, ids); store.dataSourceDidFetchQuery (consulta); // Notificar la aplicación de ganar. else store.dataSourceDidErrorQuery (query, res); // Notificar la aplicación de fail. , los ha podido recuperar() método asegura que la consulta es compatible, y luego, utilizando SC.Request, realiza una solicitud a CouchDB para la vista de publicaciones que especificamos anteriormente. Una vez realizada la solicitud, solicitamos que SproutCore notifique al didFetchPosts () Método con el resultado. Dentro didFetchPosts (), Primero verificamos que la respuesta haya ido bien. Si no fue así, respondemos con un error, en consecuencia. Por otro lado, si la respuesta fue exitosa, repasamos los resultados, obtenemos todas las publicaciones e ID y luego cargamos los registros. Después de cargar los registros, notificamos a los oyentes que la fuente de datos obtuvo algunos resultados. Al hacerlo, esto actualiza automáticamente nuestra interfaz de usuario, debido al enlace de datos que configuramos inicialmente.
Siguiente, Necesitamos manejar una nueva publicación, asegurándonos de que agregamos la publicación a CouchDB. De nuevo en Microblog.PublicacionesDataSource, agrega los siguientes métodos.
createRecord: function (store, storeKey) // Compruebe que queremos almacenar el tipo de registro correcto. if (SC.kindOf (store.recordTypeFor (storeKey), Microblog.Posts)) SC.Request.postUrl (this.getPath ("/")). json () .header ("Aceptar", "application / json" ) .notify (this, this.didCreatePost, store, storeKey) .send (store.readDataHash (storeKey)); devuelve SÍ; devuelve NO; // devuelve YES si manejó storeKey, didCreatePost: function (res, store, key) var couchResponse = this.handleCouchResponse (res); if (couchResponse.ok) // Copie CouchDB _id y _rev en el objeto / documento Microblog. var doc = store.readDataHash (clave); doc._id = couchResponse.id; doc._rev = couchResponse.rev; store.dataSourceDidComplete (key, doc, doc._id); else store.dataSourceDidError (key, res); , handleCouchResponse: function (res) if (SC.ok (res)) var couch = SC.json.decode (res.get ("encodedBody")); if (couch.ok == YES) return "ok": true, "id": couch.id, "rev": couch.rev; else return "error": verdadero, "respuesta": res; devolver "error": verdadero, "respuesta": "Ocurrió un error desconocido". ; , createMethod () En primer lugar, se asegura de que se nos haya pasado un registro del tipo correcto antes de guardar. Luego realiza una solicitud POST a CouchDB con el objeto post como sus datos. Una vez más, adjuntamos un método para ser notificado cuando la solicitud finalice.. didCreatePost () usa el método de ayuda handleCouchResponse (), que primero verifica si SproutCore encontró la respuesta OK, y luego interroga los datos devueltos para asegurarse de que CouchDB realizó la inserción con éxito. Si todo salió correctamente, devolvemos un objeto con el nuevo ID de documento y el número de revisión. didCreatePost () continúa ejecutándose si el documento fue creado con éxito. Si falla, notificamos a los oyentes de la falla. El método luego copia la ID y el número de revisión en el documento local dentro de SproutCore y notifica a los oyentes del nuevo documento. Una vez más, la interfaz de usuario se actualizará automáticamente una vez que el nuevo documento se haya insertado en la matriz de publicaciones.
Siguiente, necesitamos modificar el main.js Archivo para usar la nueva consulta de carga como se muestra abajo.
var posts = Microblog.store.find (Microblog.POSTS_QUERY); Microblog.postsController.set ("contenido", publicaciones); Y, modificar core.js utilizar el objeto de origen de datos correcto.
Microblog = SC.Application.create (/ ** @scope Microblog.prototype * / NAMESPACE: 'Microblog', VERSION: '0.1.0', store: SC.Store.create (commitRecordsAutomatically: YES). From ( "Microblog.PostsDataSource"));
Por último, Debemos agregar un proxy al SproutCore BuildFile en el directorio principal de la aplicación, indicando a SproutCore que busque CouchDB en un puerto diferente. Agregue el siguiente proxy a su BuildFile
proxy '/ microblog',: to => 'localhost: 5984'
Y, reinicie su servidor SproutCore.
Si recargas tu navegador, no deberías ver publicaciones. Esto tiene sentido ya que todavía no hay documentos en la base de datos CouchDB. Continúe y haga una publicación, vuelva a cargar el navegador y aún debería ver su publicación. También puede consultar con Futon, el panel de administración de CouchDB para ver los documentos resultantes en la base de datos.
En este tutorial, te presenté algunos de los conceptos clave dentro de SproutCore y construí una aplicación simple de Twitter como microblog. Finalmente, aprovechamos al máximo el marco del lado del cliente de SproutCore y la interfaz RESTful de CouchDB para producir una aplicación de escritorio completa, con persistencia de datos, sin una capa de aplicación del lado del servidor. Muchas Gracias Por Leer!
