Los modelos son el corazón de cualquier aplicación de JavaScript y contienen los datos interactivos, así como una gran parte de la lógica que los rodea: conversiones, validaciones, propiedades calculadas y control de acceso.
Un modelo se crea simplemente extendiendo Backbone.Model
var Geek = Backbone.Model.extend({
});
Creación de instancias de modelos: se crea una instancia de un modelo utilizando la palabra clave «nuevo».
var geek = new Backbone.Model.extend();
En este artículo veremos los siguientes modelos en backbone.js:
- get() [ modelo.get(atributo) ]
- set() [ modelo.set(atributo) ]
- unset() [ modelo.unset(atributo) ]
- escape() [ modelo.escape(atributo) ]
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Backbone.js | Model</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"
type="text/javascript">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
type="text/javascript">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type="text/javascript">
</script>
<script type="text/javascript">
var Geek = Backbone.Model.extend({
initialize: function () {
document.write("Welcome to GeeksforGeeks");
},
});
var geek = new Geek();
</script>
</head>
<body></body>
</html>
Producción:
Por lo tanto, initialize() se activa cada vez que crea una nueva instancia de un modelo (los modelos, las colecciones y las vistas funcionan de la misma manera). Es similar al constructor de una clase.
Entendamos diferentes modelos en detalle.
Obtener: model.get(atributo). Se utiliza para obtener el valor de un atributo del modelo.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Backbone.js | Model</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"
type="text/javascript">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
type="text/javascript">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type="text/javascript">
</script>
<script type="text/javascript">
Learner = Backbone.Model.extend({
defaults: {
name: 'mahesh',
age: 19,
position: 'JavaScriptDeveloper'
},
});
var Geek = new Learner(); // New object is created
// Name is displayed
document.write("name: ", Geek.get('name'), "<br/>");
// Age is displayed
document.write("age: ", Geek.get('age'), "<br/>");
// Position is displayed
document.write("position: ", Geek.get('position'), "<br/>");
var geek = new Geek();
</script>
</head>
<body></body>
</html>
Producción:
Conjunto: model.set(atributos,[opciones]): Se utiliza para actualizar o establecer un valor para las claves.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Backbone.js | Model</title>
<script src=
"https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
type="text/javascript">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type="text/javascript">
</script>
<script type="text/javascript">
var Geek = Backbone.Model.extend();
var learner = new Geek();
learner.set({ fname: "Mahesh ", lname: "Gaikwad" });
document.write("Name of the learner: ",
learner.get("fname"),
learner.get("lname"));
</script>
</head>
<body></body>
</html>
Producción:
Unset: model.unset(atributo, [opciones]): el método Unset elimina un atributo eliminándolo del hash de atributos internos.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Backbone.js | Model</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"
type="text/javascript">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
type="text/javascript">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type="text/javascript">
</script>
<script type="text/javascript">
var Organisation = Backbone.Model.extend();
var organisation = new Organisation();
organisation.set({ org_name: "gfg.org" });
document.write(
"<b>Before using unset method , Organisation name is:</b> ",
organisation.get("org_name")
);
organisation.unset("org_name");
document.write("<br>");
document.write(
"<b>After unset, Organisation name is:</b>",
organisation.get("org_name")
);
</script>
</head>
<body></body>
</html>
Producción:
Escape: modelo.escape(atributo) . El modelo backbone.js escape() es similar a la función get, pero devuelve la versión con escape HTML del atributo de un modelo.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Backbone.js | Model</title>
<script src=
"https://code.jquery.com/jquery-2.1.3.min.js"
type="text/javascript">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
type="text/javascript">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type="text/javascript">
</script>
<script type="text/javascript">
var Student = Backbone.Model.extend();
var student = new Student();
student.set({ name: "Mahesh Gaikwad" });
document.write(student.escape("name"));
</script>
</head>
<body></body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por maheshgaikwad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA