无法获取要显示属性的模型
Cannot get models to display attributes
我想知道为什么没有显示我创建的条目。我很难找到使用Marionette的简单教程,所以我选择了这里的愤怒猫教程(http://davidsulc.com/blog/2012/04/15/a-simple-backbone-marionette-tutorial/)试着做一些类似但更简单的事情,这样我就能更好地了解发生了什么。如有任何帮助,我们将不胜感激。
这是Javascript,我使用的是Marionette.js
MyApp = new Backbone.Marionette.Application();
MyApp.addRegions({
listBox : "#listBox"
});
Entry = Backbone.Model.extend({
defaults: {
entry : "Blank"
},
});
EntryList = Backbone.Collection.extend({
model: Entry
});
EntryView = Backbone.Marionette.ItemView.extend({
template: "entry-template",
tagName: 'tr',
className: 'entry'
});
EntriesView = Backbone.Marionette.CompositeView.extend({
tagName: "table",
template: "#entries-template",
itemView: EntryView,
appendHtml: function(collectionView, itemView){
collectionView.$("tbody").append(itemView.el);
}
});
MyApp.addInitializer(function(options){
var entriesView = new EntriesView({
collection: options.ents
});
MyApp.listBox.show(entriesView);
});
$(document).ready(function(){
var ents = new EntryList([
new Entry({ entry: 'abc' }),
new Entry({ entry: 'def' }),
new Entry({ entry: 'ghi' })
]);
MyApp.start({entry: ents});
});
这是html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Simple Demo</title>
<link rel="stylesheet" href="assets/screen.css">
</head>
<body>
<div id = "listBox">
</div>
<script type="text/template" id="entries-template">
<thead>
<tr class='header'>
<th>Entry</th>
</tr>
</thead>
<tbody>
</tbody>
</script>
<script type="text/template" id="entry-template">
<td><%- entry %></td>
<td><button class="delete">Delete</button></td>
</script>
<script src="js/lib/jquery.js"></script>
<script src="js/lib/underscore.js"></script>
<script src="js/lib/backbone.js"></script>
<script src="js/lib/backbone.marionette.js"></script>
<script src="js/demo.js"></script>
</body>
</html>
您的选项中似乎没有使用正确的键。你应该有:
var entriesView = new EntriesView({
collection: options.entry
});
顺便说一句,我的"愤怒的猫"教程有点过时了。要了解有关使用Marionette视图的基本知识,您最好阅读此免费pdf:http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf(这是我的木偶书的免费样本)
此外,您的模板选择器无效:您需要在有"entry-template"的地方有"#entry-template"。
相关文章:
- 使用导航属性创建Kendo UI网格模型的问题
- 将输入值设置为ng模型属性[Angular]时出现问题
- 如何使用Undercore和Backbone在HTML中表示模型属性
- 主干中的模型属性未定义
- ng重复中的ng模型-初始化唯一作用域属性
- sails.js beforeCreate方法只接收required设置为true的模型属性
- 如何使用javascript访问sails.js模型中的属性
- 如何更改与Backbone集合中的模型相关联的几个元素的css属性
- 从骨干集合筛选模型,然后为这些模型设置属性
- Ember.js:未在组件'中渲染的模型的计算属性;关于变更的参考
- 当ng repeat上的复选框具有必需的属性时,角度ng模型将变为未定义
- 将属性模型复制到剪贴板
- Backbone JS Promises在模型上设置属性之前解析
- 比较主干中的两个模型属性
- 在ember.js中访问模型之外的计算属性
- 如何在sails.js中更改属性模型中的日期格式
- 如何使用setVisible()方法设置json模型中元素的可见属性
- MVC6将视图模型列表属性分配给javascript变量
- 更新淘汰视图模型属性时激发更改事件
- angularJS + 猫鼬: 类型错误: 无法读取未定义的属性“模型”