Sto cercando di creare una semplice app usando template di sottolineatura e backbone (come descritto in Questo articolo). Sono sicuro che il file del modello sia stato caricato correttamente, ma non sono sicuro se applicherò correttamente il modello al modello (vedi sotto l'esempio)
Ho anche controllato l'output di compiledTemplate variabile, ma contiene solo il <h1> </h1> tag, quindi sembra che ci possa essere qualcosasbagliato con il formato del mio modello. Ma non sono stato in grado di trovare alcuna soluzione così da qui, sto postando questo qui sperando che qualcuno possa aiutarmi con questo ..
index.html
<head>
<script src="./dev_env/app/libs/vendor/require.min.js" data-main="dev_env/app/main"></script>
<script>
require(["app_init"]);
</script>
</head>
<body >
<div id="test">
</div>
</body>
</html>
./templates/template.html
<h1> <%= obj.title %> </h1>
./app_init.js
require([ "../app" ], function(App){
App.initialize();
});
./app.js
define([ "backbone", "./router", "underscore","jquery"], function (Backbone, Router, _, $) {
var initialize = function(){
Router.initialize();
}
return {
initialize: initialize
};
});
./models/model_menu.js
define([ "underscore", "backbone" ], function(_, Backbone){
var MenuModel = Backbone.Model.extend({
defaults: {
title: "Test1"
}
});
return MenuModel;
});
./collections/collection_menu.js
define([ "underscore", "backbone", "models/model_menu"
], function(_, Backbone, MenuModel){
var MenuCollection = Backbone.Collection.extend({
model: MenuModel
});
return MenuCollection;
});
./router.js
define(["jquery","underscore", "backbone", "views/menu/view_menu"], function ($, _, Backbone, vMenu) {
var AppRouter = Backbone.Router.extend({
routes : {
"menu" : "showMenu",
}
});
var initialize = function () {
var app_router = new AppRouter;
app_router.on("route:showMenu", function () {
var MyMenu = new vMenu();
MyMenu.render();
});
Backbone.history.start();
};
return {
initialize : initialize
};
});
./views/menu_view/view_menu.js
define([ "jquery","underscore", "backbone", "collections/collection_menu", "text!templates/template.html" ], function ($, _, Backbone, MenuCollection, myTempl) {
var MenuViiew = Backbone.View.extend({
el : $("#test"),
initialize : function () {
this.collection = new MenuCollection();
this.collection.add( {title: "Title2"});
var compiledTemplate = _.template( myTempl, { obj : this.collection.models} );
this.$el.html(compiledTemplate);
}
});
return MenuViiew;
});
risposte:
0 per risposta № 1Ora capisco dove ho sbagliato, ho frainteso cosa fosse una collezione quindi non potevo farlo funzionare. Scusa per quello, ma sto ancora imparando questa roba.
ecco la soluzione:
btw. Ho cambiato il collection_menu a menu_collections quindi è chiaro che il file contiene una raccolta di modelli di menu.
Visto / view_model.js
define([ "jquery","underscore", "backbone", "collections/menu_collections", "text!templates/template.html" ], function ($, _, Backbone, MenuCollections, myTempl) {
var MenuViiew = Backbone.View.extend({
el : $("#alex"),
initialize : function () {
this.collection = new MenusCollection()
this.collection.add({ title: "Test1" });
this.collection.add({ title: "Test2" });
},
render: function(){
var compiledTemplate = _.template(myTempl, { menus : this.collection.models});
this.$el.html(compiledTemplate);
}
});
return MenuViiew;
});
./templates/template.html
<% _.each(menus, function(menu) { %>
<h1> <%= menu.get("title") %> </h1>
<% }); %>