我在更新/重新渲染绑定到Knockout可观察数组（self.Notes）的bootstrap轮播控件数据时遇到困难。我已经大大简化了提供的代码，因为它太明智了。
一切都在页面加载时呈现正常，但是当调用self.RemoveNoteFromReviewSetup并修改数组时，轮播完全消失。当我检查dom时，所有标记都在那里，并且标记反映了淘汰应该对dom做出的变化。但是，这是一个奇怪的部分，当只更新self.Notes的第一个（索引0）元素时，轮播将根据更新的数组self.Notes再次呈现。当数组中的任何后续项目发生更改时，轮播将消失。
我遗漏了很多代码，所以如果你还需要查看其他内容，请告诉我。
这让我发疯了，我正在考虑只是启动一个页面重新加载命令，所以一切都从一开始就呈现。然而，这当然会破坏整个Knockout方法。
非常感谢任何指针。
HTML：
<!-- ko foreach: Reviews -->
<div class="flashcards-controls">
<button id="btnSlideRight" class="btn btn-custom pull-right flatleft flatright" data-bind="click: NextNote"><i class="fa fa-angle-double-right"></i></button><button id="btnSlideLeft" class="flatleft flatright btn btn-custom pull-left" data-bind="click: PrevNote"><i class="fa fa-angle-double-left"></i></button>
<div class="container text-center">
<span class="badge badge-notecounter"><span data-bind="html: NoteCounter"></span> / <span data-bind="html: Notes().length"></span></span>
</div>
</div>
<div class="container flashcards" id="flashcards-container">
<!-- Carousel
================================================== -->
<div id="fashcardsCarousel" class="carousel slide" data-wrap="false" data-interval="false">
<!-- Indicators -->
@* <ol class="carousel-indicators" data-bind="visible: Notes().length > 1, foreach: Notes">
<li data-target="#fashcardsCarousel" data-bind="attr: { 'data-slide-to': $index }, css: { 'active': $index() == $parent.CurrentNoteIndex() }, click: $parent.NextNote"></li>
</ol>*@
<!-- Slides -->
<div class="carousel-inner" data-bind="foreach: { data: Notes, afterRender: $parent.postCarouselRenderEvent }">
<div class="item" data-bind="css: { 'active': $index() == $parent.CurrentNoteIndex() }">
<div class="row">
<div class="col-xs-12">
<div class="panel panel-default">
<div class="panel-heading clearfix">
<div class="btn-group pull-right">
<button data-bind="click: ToggleTagEditor, attr: { id: 'btnTagEditor' + GlobalClientId() }" class="btn btn-sm btn-custom">
<i class="fa fa-tags fa-fw"></i>
</button>
<button class="btn btn-sm btn-custom">
<i class="fa fa-book fa-fw"></i>
</button>
<button data-bind="click: ShowInfo, attr: { id: 'btnInfo' + GlobalClientId() }" class="btn btn-sm btn-custom">
<i class="fa fa-info fa-fw"></i>
</button>
</div>
<h5><strong data-bind=" text: Title"></strong></h5>
</div>
<div class="panel-body" data-bind="html: Content, visible: Content">
</div>
<div class="panel-body" data-bind="style: { display: IsLoading() == false ? 'none' : '' }">
<div class="text-center text-muted">
<i class="fa fa-refresh fa-spin"></i><br />
Loading note content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<!-- ko if: Notes().length > 1 -->
@*<a class="left carousel-control"We added support for all common image types. In other words, pictures will now show up when you review your @evernote notes :-) href="#fashcardsCarousel" data-slide="prev" data-bind="click: PrevNote"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#fashcardsCarousel" data-slide="next" data-bind="click: NextNote"><span class="glyphicon glyphicon-chevron-right"></span></a>*@
<!-- /ko -->
</div>
<!-- /.carousel -->
</div>
<div id="popoverStagingArea" data-bind="foreach: { data: Notes, afterRender: $parent.postTagPopoversRenderEvent }" style="display: none;">
<div data-bind="attr: { id: 'tagEditor' + GlobalClientId() }">
<select multiple></select>
<p class="text-muted text-center" data-bind="visible: TagsUpdating" style="margin: 0;"><i class="fa fa-refresh fa-spin"></i></p>
<div data-bind="attr: { id: 'tagRemovalConfirmation' + GlobalClientId() }" style="display: none">
<button class="btn btn-sm btn-custom btn-block" data-bind="click: RemoveTagPendingRemoval">Only remove tag from note</button>
<button class="btn btn-sm btn-custom-warning btn-block" data-bind="click: RemoveTagAndDeleteNoteFromReviewSetup">Also remove note from filter</button>
<button class="btn btn-sm btn-default btn-block" data-bind="click: CancelTagRemoval">Cancel</button>
<p class="text-center" style="margin-top: 3px;">(<a data-bind="click: TagRemovalExplainer().slideDown('fast')" href="#">what is this?</a>)</p>
<div data-bind="attr: { id: 'tagRemovalExplainer' + GlobalClientId() }" style="display: none;">
<p>
When you setup filter <strong data-bind="text: $parent.SetupName"></strong> you selected tag <span class="label label-success" data-bind="text: TagPendingRemoval().Name"></span> as part of the search criteria. We thought you might want to have the option to either just remove the tag from the note and save it to Evernote, or also delete this note from any subsequent reviews that are part of <strong data-bind="text: $parent.SetupName"></strong>.
</p>
<p class="text-center">
(<a data-bind="click: TagRemovalExplainer().slideUp('fast')" href="#">hide</a>)
</p>
</div>
</div>
</div>
</div>
<!-- /ko -->
JS：
function Review(reviewItem) {
//code removed//
self.RemoveNoteFromReviewSetup = function (note) {
var apiRemoveNoteString = "/api/review/" + self.Guid + "/note/" + note.Guid;
$.ajaxq("notes", {
type: "DELETE",
url: apiRemoveNoteString,
headers: { "Authorization": "Token " + $.cookie("rat") },
success: function (replacementNote) {
var originalNoteIdx = self.Notes.indexOf(note);
self.Notes.replace(self.Notes()[originalNoteIdx], new Note(replacementNote, self));
self.Notes()[originalNoteIdx].GetContent();
console.log(self.Notes()[originalNoteIdx]);
self.Notes()[originalNoteIdx].InitTagEditor();
},
error: function (jqXHR, textStatus, errorThrown) {
alert("We could not remove a note for you at this time. Please try again later.");
},
complete: function () {
},
dataType: "json"
});
}
}
答案 0 :(得分：1)
好的，我明白了。它与Knockout无关。在重新审视了重新呈现的轮播标记之后，我注意到没有任何幻灯片具有类＃34;活动＆＃34;，Bootstrap使用它来确定当前幻灯片。手动/编程后添加此类，如下所示：
var slide = $("#yourselector")[slideIndex];
$(slide).addClass("active");
整个旋转木马再次可见，所有行为都完好无损： - ）。
这是我生命中的另外1.5天我不会回来但是我会通过告诉自己我已经获得了Knockout和Bootstrap的库内部工作的宝贵知识来安慰自己...