He leído un montón de que la columna vertebral no hacer de dos manera de unión, pero no sé exactamente a entender este concepto.

Podría alguien darme un ejemplo de cómo una forma de unión trabaja en un MVC codebase y cómo no con la columna vertebral?

InformationsquelleAutor Chris M | 2012-11-22

5 Comentarios

  1. 226

    De enlace bidireccional significa que:

    1. Cuando las propiedades en el modelo se actualiza, lo hace la interfaz de usuario.
    2. Cuando elementos de interfaz de usuario actualizada, los cambios se propagan de nuevo a la modelo.

    Columna vertebral no tiene un «cocido-en» la aplicación de #2 (a pesar de que sin duda puede hacer uso de detectores de eventos). Otros marcos como Knockout hacer el cableado de enlace bidireccional automágicamente.


    En la columna vertebral, usted puede lograr fácilmente #1 por la unión de una vista de «representación» método para su modelo del evento «change». Para lograr #2, usted necesita agregar también un cambio de escucha para el elemento de entrada, y llame a model.set en el controlador.

    Aquí un Violín con dos-manera vinculante establecido en la columna vertebral.

    • La respuesta es tan dolorosamente obvio una vez que lo vea. Muchas gracias por tomarse el tiempo para darnos una respuesta clara y ejemplo.
    • Y con base avanzada viene… de 3 vías de enlace de datos -> Ver, el Modelo de la Base de datos. Sólo pensé que estaba bastante limpio.
  2. 43

    De enlace bidireccional significa que cualquier información relacionada con los cambios que afectan al modelo de inmediatamente se propagan a la concordancia de la vista(s), y que los cambios realizados en la vista(s) (es decir, por el usuario) son refleja inmediatamente en el modelo subyacente. Cuando los datos de la app, también cambia la interfaz de usuario, y a la inversa.

    Este es un concepto sólido para construir una aplicación web en la parte superior, ya que hace que el «Modelo» de abstracción de una caja fuerte, atómica de fuente de datos a utilizar en todas partes dentro de la aplicación. Decir que, si un modelo, asociado a una vista, los cambios, a continuación, juego de la pieza de la interfaz de usuario (la vista) reflejan que, no importa lo que. Y la coincidencia de la pieza de la interfaz de usuario (la vista) puede ser utilizado como un medio de recogida de las entradas del usuario/datos, así como para mantener los datos de la aplicación hasta la fecha.

    Una buena forma de unión de la aplicación, obviamente, deben realizar esta conexión entre un modelo y algunas de la vista(s) tan simple como sea posible, de un desarrollador punto de vista.

    Es bastante falsa decir que la columna vertebral no apoyo de dos vías de enlace: aunque no es una característica central de la estructura, se puede realizar simplemente el uso de la red Troncal de Eventos, aunque. Cuesta unos explícita líneas de código para los casos simples; y puede llegar a ser bastante peligroso para el más complejo de los enlaces. Aquí es un caso sencillo (código no probado, por escrito, sobre la marcha, sólo por el bien de la ilustración):

    Model = Backbone.Model.extend
      defaults:
        data: ''
    
    View = Backbone.View.extend
      template: _.template("Edit the data: <input type='text' value='<%= data %>' />")
    
      events:
        # Listen for user inputs, and edit the model.
        'change input': @setData
    
      initialize: (options) ->
        # Listen for model's edition, and trigger UI update
        @listenTo @model, 'change:data', @render
    
      render: ->
        @$el.html @template(@model.attributes)
        @
    
      setData: (e) =>
        e.preventDefault()
        @model.set 'data', $(e.currentTarget).value()
    
    model: new Model()
    view = new View {el: $('.someEl'), model: model}

    Esto es bastante típico patrón en una materia Troncal de la aplicación. Como se puede ver, se requiere una cantidad decente de (bastante estándar) código.

    AngularJS y algunas otras alternativas (Ember, Knockout…) ofrecen dos vías de enlace, como primer ciudadano de la característica. Se resumen muchos de borde de los casos en algunas DSL, y hacer su mejor esfuerzo en la integración de dos vías de enlace dentro de su ecosistema. Nuestro ejemplo sería algo como esto con AngularJS (código no probado, ver más arriba):

    <div ng-app="app" ng-controller="MainCtrl">
      Edit the data:
      <input name="mymodel.data" ng-model="mymodel.data">
    </div>
    angular.module('app', [])
      .controller 'MainCtrl', ($scope) ->
        $scope.mymodel = {data: ''}

    Bastante corto!

    Pero, ser conscientes de que algunos de pleno derecho de dos vías de las extensiones de enlace existen para columna vertebral (en raw, subjetiva orden decreciente de complejidad): Epoxi, Stickit, ModelBinder

    Una cosa fresca con Epoxi, por ejemplo, es que permite declarar los enlaces (modelo de atributos <-> la vista del elemento DOM), ya sea dentro de la plantilla (DOM), o dentro de la implementación de vista (JavaScript). Algunas personas desagrada la adición de «directivas» a la DOM/plantilla (como el ng-* atributos requeridos por AngularJS, o enlazar los datos de los atributos de Ember).

    Tomar Epoxi como un ejemplo, uno puede recrear el raw columna vertebral de la aplicación en algo como esto (…):

    Model = Backbone.Model.extend
      defaults:
        data: ''
    
    View = Backbone.Epoxy.View.extend
      template: _.template("Edit the data: <input type='text' />")
      # or, using the inline form: <input type='text' data-bind='value:data' />
    
      bindings:
        'input': 'value:data'
    
      render: ->
        @$el.html @template(@model.attributes)
        @
    
    model: new Model()
    view = new View {el: $('.someEl'), model: model}

    Todos en todos, casi todos los de la «corriente principal» JS marcos de soporte de enlace bidireccional. Algunos de ellos, tales como la columna vertebral, requieren algún trabajo extra para hacer el trabajo suavemente, pero esos son los mismos que no hacen cumplir de una forma específica para hacerlo, para empezar. Por lo que es realmente acerca de su estado de ánimo.

    También, usted puede estar interesado en Flujo, una arquitectura diferente para las aplicaciones web de la promoción de una vía de enlace a través de un patrón circular. Se basa en el concepto de fast holístico de la re-representación de componentes de interfaz de usuario sobre cualquier cambio de los datos para garantizar la cohesión y hacer que sea más fácil a la razón sobre el código/flujo de datos. En la misma tendencia, es posible que desee revisar el concepto de la MVI (Modelo-Vista-Intención), por ejemplo Ciclo.

    • Muchos de los desarrolladores, especialmente Reaccionar/Flujo de devs no consideran dos vías de enlace de un seguro de patrón para la construcción a gran escala de aplicaciones.
  3. 25

    McGarnagle tiene una gran respuesta, y usted querrá estar aceptar su, pero pensé que me gustaría mencionar (ya que se le preguntó a) ¿cómo databinding obras.

    Se aplica, en general, por el disparo de eventos cada vez que se realiza un cambio en los datos, lo que hace que los oyentes (por ejemplo, la interfaz de usuario) para ser actualizado.

    De enlace bidireccional funciona al hacer esto dos veces, con un poco de cuidado para asegurarse de que no se terminan atrapados en un bucle de eventos (donde la actualización de la causa de otro acontecimiento a ser despedido).

    Me iba a poner esto en un comentario, pero se estaba poniendo bastante largo…

  4. 1

    Realidad emberjs admite dos vías de enlace, que es una de la característica más potente para un javascript MVC framework. Usted puede comprobar fuera dónde mencionar enlace en su guía del usuario.

    para emberjs, para crear dos forma de unión es mediante la creación de una nueva propiedad con la cadena de Unión en el extremo, a continuación, especificar una ruta de acceso desde el ámbito global:

    App.wife = Ember.Object.create({
      householdIncome: 80000
    });
    
    App.husband = Ember.Object.create({
      householdIncomeBinding: 'App.wife.householdIncome'
    });
    
    App.husband.get('householdIncome'); //80000
    
    //Someone gets raise.
    App.husband.set('householdIncome', 90000);
    App.wife.get('householdIncome'); //90000

    Tenga en cuenta que los enlaces no se actualizan inmediatamente. Ember espera hasta que todo el código de la aplicación ha terminado de ejecutarse antes de la sincronización de los cambios, así que usted puede cambiar una propiedad enlazada tantas veces como quieras sin tener que preocuparse acerca de la sobrecarga de la sincronización de los enlaces cuando los valores son transitorios.

    Espero que ayude en extender original de la respuesta seleccionada.

  5. 0

    Vale la pena mencionar que hay muchas soluciones diferentes que ofrecen dos vías de enlace y jugar muy bien.

    He tenido una grata experiencia con este modelo de cuaderno – https://github.com/theironcook/Backbone.ModelBinder. que da sensibles valores todavía un montón de personalizado selector de jquery asignación de atributos de modelo para los elementos de entrada.

    Hay más extendido en la lista de la columna vertebral extensiones/plugins en github

Dejar respuesta

Please enter your comment!
Please enter your name here