Marionette: ItemView 未由 CompositeView 呈现
Marionette: ItemView not rendered by CompositeView
我的 ItemView 没有被我的 CompositeView 渲染:
我的app.js:
var express= require("express"),
bodyparser= require("body-parser");
var app= express();
app.use(express.static(__dirname+ "/public"));
app.use(bodyparser.json());
app.use(bodyparser.urlencoded({extended: true}));
app.get("/*", function(req, res){
res.render("index.jade");
});
app.listen(3002);
app.js 正在呼叫 index.jade:
doctype html
#nexter
script(id="tabler" type="text/template").
<table>
<thead>
<tr id="check"> <td> One </td> </tr>
</thead>
<tbody id="tbody1">
</tbody>
</table>
script(id="urview", type="text/template")
<tr> <td> <p> Many </p> </td> </tr>
<tr> <td> <p> Any </p> </td> </tr>
script(src= "/jquery.js")
script(src= "/underscore.js")
script(src= "/backbone.js")
script(src= "/backbone.marionette.js")
script(src= "/theapp.js")
index.jade 调用app.js:
var Usertracker= new Marionette.Application();
var Uview= Marionette.ItemView.extend({
template: "#urview",
el: "#tbody1"
});
var Usercompositeview= Marionette.CompositeView.extend({
template: "#tabler",
itemView: Uview,
events: {
"click #check": "eventer"
},
eventer: function(){
$("p").css("background-color", "yellow");
$("tr").css("background-color", "orange");
}
});
Usertracker.addRegions({
nexter: "#nexter"
});
Usertracker.addInitializer(function(){
Usertracker.nexter.show(new Usercompositeview({}));
});
Usertracker.start();
我得到 One
作为输出,点击时颜色会发生变化。
但是我无法将 Many
和 Any
作为输出!
需要帮助,谢谢!
所以,这里的问题是没有集合被传递到 CompositeView
。
以下工作:
app.js
var express= require("express"),
bodyparser= require("body-parser");
var app= express();
app.use(express.static(__dirname+ "/public"));
app.use(bodyparser.json());
app.use(bodyparser.urlencoded({extended: true}));
app.get("/*", function(req, res){
res.render("index.jade");
});
app.listen(3002);
index.jade:
doctype html
#nexter
script(id="tabler" type="text/template").
<table id="some" style="border: 1px solid black;">
<thead>
<tr id="check"> <td> One </td> </tr>
</thead>
<tbody id="tbody1">
</tbody>
</table>
script(id="urview", type="text/template").
<tr style="border: 1px solid black;">
<td style="border: 1px solid black;"> <p> Many <%=idee%> </p> </td>
<td style="border: 1px solid black;"> <p> Any </p> </td>
</tr>
script(src= "/jquery.js")
script(src= "/underscore.js")
script(src= "/backbone.js")
script(src= "/backbone.marionette.js")
script(src= "/theapp.js")
app.js
var Usertracker= new Marionette.Application();
var M1= Backbone.Model.extend({});
var C1= Backbone.Collection.extend({
model: M1
});
var c1= new C1([{idee: 21}, {idee: 43}, {idee: 54}]);
var Uview= Marionette.ItemView.extend({
template: "#urview"
});
var Usercompositeview= Marionette.CompositeView.extend({
template: "#tabler",
childView: Uview,
childViewContainer: "#tbody1",
events: {
"click #check": "eventer",
},
eventer: function(){
$("p").css("background-color", "yellow");
$("tr").css("background-color", "orange");
}
});
Usertracker.addRegions({
nexter: "#nexter"
});
Usertracker.nexter.show(new Usercompositeview({collection: c1}));
我的 ItemView 没有被我的 CompositeView 渲染:
我的app.js:
var express= require("express"),
bodyparser= require("body-parser");
var app= express();
app.use(express.static(__dirname+ "/public"));
app.use(bodyparser.json());
app.use(bodyparser.urlencoded({extended: true}));
app.get("/*", function(req, res){
res.render("index.jade");
});
app.listen(3002);
app.js 正在呼叫 index.jade:
doctype html
#nexter
script(id="tabler" type="text/template").
<table>
<thead>
<tr id="check"> <td> One </td> </tr>
</thead>
<tbody id="tbody1">
</tbody>
</table>
script(id="urview", type="text/template")
<tr> <td> <p> Many </p> </td> </tr>
<tr> <td> <p> Any </p> </td> </tr>
script(src= "/jquery.js")
script(src= "/underscore.js")
script(src= "/backbone.js")
script(src= "/backbone.marionette.js")
script(src= "/theapp.js")
index.jade 调用app.js:
var Usertracker= new Marionette.Application();
var Uview= Marionette.ItemView.extend({
template: "#urview",
el: "#tbody1"
});
var Usercompositeview= Marionette.CompositeView.extend({
template: "#tabler",
itemView: Uview,
events: {
"click #check": "eventer"
},
eventer: function(){
$("p").css("background-color", "yellow");
$("tr").css("background-color", "orange");
}
});
Usertracker.addRegions({
nexter: "#nexter"
});
Usertracker.addInitializer(function(){
Usertracker.nexter.show(new Usercompositeview({}));
});
Usertracker.start();
我得到 One
作为输出,点击时颜色会发生变化。
但是我无法将 Many
和 Any
作为输出!
需要帮助,谢谢!
所以,这里的问题是没有集合被传递到 CompositeView
。
以下工作:
app.js
var express= require("express"),
bodyparser= require("body-parser");
var app= express();
app.use(express.static(__dirname+ "/public"));
app.use(bodyparser.json());
app.use(bodyparser.urlencoded({extended: true}));
app.get("/*", function(req, res){
res.render("index.jade");
});
app.listen(3002);
index.jade:
doctype html
#nexter
script(id="tabler" type="text/template").
<table id="some" style="border: 1px solid black;">
<thead>
<tr id="check"> <td> One </td> </tr>
</thead>
<tbody id="tbody1">
</tbody>
</table>
script(id="urview", type="text/template").
<tr style="border: 1px solid black;">
<td style="border: 1px solid black;"> <p> Many <%=idee%> </p> </td>
<td style="border: 1px solid black;"> <p> Any </p> </td>
</tr>
script(src= "/jquery.js")
script(src= "/underscore.js")
script(src= "/backbone.js")
script(src= "/backbone.marionette.js")
script(src= "/theapp.js")
app.js
var Usertracker= new Marionette.Application();
var M1= Backbone.Model.extend({});
var C1= Backbone.Collection.extend({
model: M1
});
var c1= new C1([{idee: 21}, {idee: 43}, {idee: 54}]);
var Uview= Marionette.ItemView.extend({
template: "#urview"
});
var Usercompositeview= Marionette.CompositeView.extend({
template: "#tabler",
childView: Uview,
childViewContainer: "#tbody1",
events: {
"click #check": "eventer",
},
eventer: function(){
$("p").css("background-color", "yellow");
$("tr").css("background-color", "orange");
}
});
Usertracker.addRegions({
nexter: "#nexter"
});
Usertracker.nexter.show(new Usercompositeview({collection: c1}));