KnockOutjs: encuadernación de componentes, trabajando con objetos como tipo de datos -- mponents campo con mediator campo con knockout-3.0 camp Relacionados El problema

KnockoutJS: components binding, working with objects as data type


0
vote

problema

Español

Soy nuevo en Knockout JS y encuentro esta biblioteca muy poderosa, pero con bastante difícil entender. La documentación es Hudban, pero siempre es (también) Snippets de código pequeño, por lo que es difícil tener la imagen grande, a menos que su estilo de codificación y amplificador; El paradigma de la filosofía son los mismos que los desarrolladores de KO.

Vengo del mundo angular, y estoy acostumbrado a tener una matriz donde cada artículo es un objeto con propiedades (ID, nombre, etc.). Cuando haga clic en un botón, "Envío" este objeto a un nuevo componente que lo hará en un formulario.

Estoy seguro de que me estoy perdiendo algo obvio, pero no entiendo cómo hacer que las cosas funcionen, incluso con los complementos como ko.mapping y ko.postbox.

¿Alguien puede ayudarme a encontrar la solución? En el código de trabajo anterior, he publicado mis 3 preguntas muy específicas en el área de JavaScript.

Edit: Les respondí a ellos, pero no sé si es una mejor práctica o no .

  var      // User class to give to each property the observable capacity      User = function (rawData) {          var self = this,              data = rawData || {};            self.id = ko.observable(data.id);          self.name = ko.observable(data.name);      },        // List component. initially in a separate file      // (small modifs so all can be in the same file for this demo)      cmplist = {          viewModel: function () {              var self = this;              self.users = ko.observableArray([                  new User({id: 1, name: 'John'}),                  new User({id: 2, name: 'Jack'}),                  new User({id: 3, name: 'Smith'})              ]);                // #ANSWER 1: initialize postbox event              self.user = ko.observable(new User()).publishOn('userEdit');                self.showEdit = function (user) {                  // #QUESTION 1: how do I send this object to the                  //              users-form component. ko.postbox?                  // #ANSWER 1: change the observable                  self.user(user);                  console.log('show', user);              };          },          template: ''              + '<ul data-bind="foreach: users">'              + '<li>'              + '<button data-bind="click: $parent.showEdit">Edit</button>'              + '&nbsp;<span data-bind="text: name"></span>'              + '</li>'              + '</ul>'      },        // Form component, initially in a separate file      // (small modifs so all can be in the same file for this demo)      cmpform = {          viewModel: function () {              var self = this;              // #QUESTION 2: how do I recept the object sent by the              //              list?              // #ANSWER 2: make the observable subscribe to event              self.user = ko.observable(new User()).subscribeTo('userEdit');                self.save = function () {                  // #QUESTION 3: how do I notify the users-list cmp                  //              that object has changed? ko.postbox?                  window.alert('save ' + ko.toJSON(self.user()));                  console.log('save');              };          },          // #ANSWER 2: call user() with parenthesis to access properties          template: ''              + '<form>'              + '<p>Edit user <span data-bind="text: user().name"></span> '              + 'with id <span data-bind="text: user().id"></span></p>'              + '<input data-bind="textInput: user().name" />'              + '<button data-bind="click: save">Save</button>'              + '</form>'      };    // KO bootstrap, initially in a 3rd file  // (small modifs so all can be in the same file for this demo)  ko.components.register('users-list', cmplist);  ko.components.register('users-form', cmpform);  ko.applyBindings({});  
  ul {     border: 1px solid blue;     list-style: none;     float: left;  }    li {     border: 1px solid green;   }    form {     border: 1px solid red;    float: right;    margin-top: 20px;  }    ul, li, form {     padding: 5px;   }  
  <html>      <head>          <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>          <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-postbox/0.5.2/knockout-postbox.min.js"></script>      </head>      <body>            <users-list></users-list>                  <users-form></users-form>        </body>  </html>  
Original en ingles

I'm new to Knockout JS and I find this library very powerful, but quite hard to understand sometimes. The documentation is hudge, but it's always (too) small code snippets, so it's difficult to have the big picture, unless your coding style & philosophy paradigm are the same as KO developers.

I come from angular world, and I'm used to have an array where each item is an object with properties (id, name, etc). When I click a button, I "send" this object to a new component that will render it in a form.

I'm sure I'm missing something obvious, but I don't understand how to make things work, even with plugins like ko.mapping and ko.postbox.

Does anyone can help me to find the solution? In the working code above, I've posted my 3 very specific questions in the javascript area.

EDIT: I answered to them, but I don't know if it's a best practice or not.

var      // User class to give to each property the observable capacity      User = function (rawData) {          var self = this,              data = rawData || {};            self.id = ko.observable(data.id);          self.name = ko.observable(data.name);      },        // List component. initially in a separate file      // (small modifs so all can be in the same file for this demo)      cmplist = {          viewModel: function () {              var self = this;              self.users = ko.observableArray([                  new User({id: 1, name: 'John'}),                  new User({id: 2, name: 'Jack'}),                  new User({id: 3, name: 'Smith'})              ]);                // #ANSWER 1: initialize postbox event              self.user = ko.observable(new User()).publishOn('userEdit');                self.showEdit = function (user) {                  // #QUESTION 1: how do I send this object to the                  //              users-form component. ko.postbox?                  // #ANSWER 1: change the observable                  self.user(user);                  console.log('show', user);              };          },          template: ''              + '<ul data-bind="foreach: users">'              + '<li>'              + '<button data-bind="click: $parent.showEdit">Edit</button>'              + '&nbsp;<span data-bind="text: name"></span>'              + '</li>'              + '</ul>'      },        // Form component, initially in a separate file      // (small modifs so all can be in the same file for this demo)      cmpform = {          viewModel: function () {              var self = this;              // #QUESTION 2: how do I recept the object sent by the              //              list?              // #ANSWER 2: make the observable subscribe to event              self.user = ko.observable(new User()).subscribeTo('userEdit');                self.save = function () {                  // #QUESTION 3: how do I notify the users-list cmp                  //              that object has changed? ko.postbox?                  window.alert('save ' + ko.toJSON(self.user()));                  console.log('save');              };          },          // #ANSWER 2: call user() with parenthesis to access properties          template: ''              + '<form>'              + '<p>Edit user <span data-bind="text: user().name"></span> '              + 'with id <span data-bind="text: user().id"></span></p>'              + '<input data-bind="textInput: user().name" />'              + '<button data-bind="click: save">Save</button>'              + '</form>'      };    // KO bootstrap, initially in a 3rd file  // (small modifs so all can be in the same file for this demo)  ko.components.register('users-list', cmplist);  ko.components.register('users-form', cmpform);  ko.applyBindings({});
ul {     border: 1px solid blue;     list-style: none;     float: left;  }    li {     border: 1px solid green;   }    form {     border: 1px solid red;    float: right;    margin-top: 20px;  }    ul, li, form {     padding: 5px;   }
<html>      <head>          <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>          <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-postbox/0.5.2/knockout-postbox.min.js"></script>      </head>      <body>            <users-list></users-list>                  <users-form></users-form>        </body>  </html>
        
       
       

Lista de respuestas


Relacionados problema

1  Comportamiento inesperado usando ko.mapping.fromjs  ( Unexpected behavior using ko mapping fromjs ) 
Estoy experimentando con ko.mapping.fromjs ( http://knockoutjs.com/documentation/plugins-mapping.html ) < / p> Dado el código a continuación, y las expectati...

1  No se pueden acceder a la visualización de los observables y funciones del modelo dentro de la función de devolución de llamada de éxito de Ajax: Knockout [Duplicate]  ( Cannot access view models observables and functions inside ajaxs success call ) 
Esta pregunta ya tiene respuestas aquí : $ (esto) dentro del éxito de Ajax no funciona ...

1  Knockout 3.1: Select2 no funciona correctamente con Valueallowunset  ( Knockout 3 1 select2 not working properly with valueallowunset ) 
Me di cuenta de que cuando se utiliza valueAllowUnset: true con el plugin Seleccionar2, el valor por defecto no es visible en el cuadro de selección. Sin em...

0  Knockout, cómo agregar funciones personalizadas  ( Knockout how to add custom functions ) 
Tengo este código: <p> </p>0 En mi código de llamadas, tengo: <p> </p>1 y ahora puedo hacer: <p> </p>2 La función se aparece con la intelect...

0  OptioCaption no se elimina después de actualizar su observable  ( Optionscaption not being removed after updating its observable ) 
Basado en la documentación de Knockout, la forma de eliminar el texto predeterminado en un elemento seleccionado cuando se usa OptioScAption es unirlo a un ob...

0  Uso de SolicitiningAccessRstonode en unión personalizada  ( Using applybindingaccessorstonode in custom binding ) 
Estoy haciendo una vinculación que simplifica agregar una clase CSS dependiendo de un valor booleano. Quería usar applyBindingAccessorsToNode porque parece ...

0  Deckout Computable Matriz observable de otras matrices observables  ( Knockout computed observable array from other observable arrays ) 
Estoy usando Knockout con mi proyecto ASP.NET CORE para lograr los siguientes 1- Estoy tratando de calcular el inventario vendido en base al inventario de ape...

0  Componentes de Knockout, la plantilla ya se ha inyectado en este elemento, pero aún no está atado  ( Knockout components the template has already been injected into this element ) 
de knockutjs docs No entiendo esta oración: La plantilla ya se ha inyectado en este elemento, pero aún no está obligado. bathrooms9 ...

1  Eliminar enlaces en Knockout JS  ( Removing bindings in knockout js ) 
Estoy usando Kogrid en Jquery Mobile. Cuando el usuario haga clic en una fila, irá la página de detalles. En ese usuario, el usuario puede actualizar los dato...

0  No puede aplicar los enlaces varias veces al mismo elemento, el problema de Knockout JS  ( You cannot apply bindings multiple times to the same element knockout js proble ) 
Necesito ayuda sobre este error. Estoy tratando de cambiar la visibilidad del elemento DIV al elegir las opciones de la lista desplegable, pero recibo este er...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos