主干+ jQuery .append()
我已经翻阅过大多数相关的帖子，也找不到类似的案例。我有点困惑，希望你们能解决这个问题。
我使用脊骨+ jQuery +车把+带REST+JSON API的引导带。
我正在尝试构建一个包含文本的多个项目的可折叠视图。折叠有三个层次: 1)只有项目，2)项目+文本标题，3)项目+文本标题+全文。
应该发生的是，ItemListView从API中提取所有项，并为每个条目呈现一个ItemView。ItemView被进一步细分为两个工具栏模板--第一个用于特定于项的标记，另一个用于特定于文本的标记。
问题似乎是，$("#item" + itemNum)选择器在this.model.get("texts").forEach(function(txt, that)中不匹配任何内容(或者至少.append()没有添加任何内容)。
我尝试将选择器更改为$("item1")，但是代码变得完全无效，生成一个标有第一个项目的第一个文本的标题和另一个项目的内容仅为文本文本的工具栏模板：
<div id="item1" class="item in collapse" style="height: auto;">
<ul class="text-list"></ul>
<li class="text-container"><span class="pict text-title collapsed" data-toggle="collapse" data-target="#text2-1">Otsikko 1</span>
<span id="text2-1" class="collapse item-text in" style="height: 0px;"><br>Teksti 3</span></li>
</div>还要注意奇怪的style="height: 0px;"和item in collapse，它们似乎并不来自任何地方(至少不是我的模板.)。
API当前返回以下测试数据(两个项，第一个项有两个文本，第二个项有一个文本)：
[{"texts": [{"text": "Teksti 1", "id": 1, },
{"text": "Teksti 2", "id": 2, }],
"open": false,
"id": 1,
"name": "Asia 1"},
{"texts": [{"text": "Teksti 3", "id": 1, }],
"open": false,
"id": 2,
"name": "Asia 2"}]我对整件事有个看法：
var ItemView = Backbone.View.extend({
tagName: 'div',
initialize: function () {
_.bindAll(this, 'render');
this.model.bind('change', this.render);
},
render: function (itemNum) {
// Render item titles
try {
var src = $("#item-template").html();
var itemTemplate = Handlebars.compile(src);
} catch (e) {
console.log(e)
}
$(this.el).html(itemTemplate({
itemNum: itemNum,
itemName: this.model.get("name"),
}));
// Add texts under titles
try {
var src = $("#text-template").html();
var textTemplate = Handlebars.compile(src);
} catch (e) {
console.log(e)
}
// MOST LIKELY THE PROBLEM:
var counter = 0;
this.model.get("texts").forEach(function(txt) {
console.log(txt.text);
counter++;
$("#item1").append(textTemplate({
itemNum: itemNum,
textNum: counter,
text: txt.text
}));
});以防万一，下面是列表视图：
var ItemListView = Backbone.View.extend({
el: $('#items'),
initialize: function () {
_.bindAll(this, 'render', 'appendItem');
this.items = new Items();
this.render();
},
render: function () {
var self = this, p;
p = this.items.fetch();
p.done(function () {
var itemCount = 0;
_(self.items.models).each(function(item) {
itemCount++;
self.appendItem(item, itemCount);
}, self);
});
},
appendItem: function (item, itemCount) {
var itemView = new ItemView({
model: item
});
$('#item-list', this.el).append(itemView.render(itemCount).el);
}
});...and车把模板：
<script id="item-template" type="text/x-handlebars-template">
<span class="item-title pict" data-toggle="collapse" data-target="#item{{itemNum}}">{{itemName}}</span>
<div id="item{{itemNum}}" class = "collapse item">
<ul class="text-list"></ul>
</div>
</script>
<script id="text-template" type="text/x-handlebars-template">
<li class="text-container"><span class="pict text-title" data-toggle="collapse" data-target="#text{{itemNum}}-{{textNum}}">Otsikko {{textNum}}</span>
<span id="text{{itemNum}}-{{textNum}}" class="collapse item-text"><br>{{text}}</span></li>
</script>呈现的...and HTML：
<div class="span2" id="items">
<div id="item-list"></div>
</div>谢谢!几个小时来，我一直用头撞墙，不知道该怎么办。
而且，这个周末我只做了我的第一个Backbone.js代码，所以我很感谢您对样式/设计的任何评论。:)
Stack Overflow用户
发布于 2013-03-02 17:19:06
好的，我有时间再看一遍，发现这是一个简单的错误
$(this.el).html(itemTemplate({
itemNum: itemNum,
itemName: this.model.get("name"),
}));把.html()改成.append()成功了，毫不奇怪.
https://stackoverflow.com/questions/15058156
复制相似问题
腾讯云开发者
