基于foreach循环渲染的部分视图动态生成div

Question

我正在尝试根据 foreach 语句呈现的部分视图动态生成 div。我成功地根据数组值生成动态 div。但是，第二次或第三次渲染局部视图时，不会单独生成 div，而是将其添加到之前的 div 长度。这是我面临的问题的更多描述。

查看

<div class="section-wrap break" id="ServicePlan_PrioritySectionNew" data-bind="foreach:application.viewModel.SupportedPriorities">
            @{Html.RenderPartial("~/Views/Home/ServicePlan/_Priority1.cshtml");}
        </div>

局部视图

<div class="priority-timeline">
<div class="timeline-list">
    <div class="timeline-list-items" style="margin-left: 75px">
        <h6 data-bind="text:hasValue(Title())?Title():'&nbsp;'"></h6>
        <div class="timeline-bar" id="resizable">                
            <div class="bar-steps">                    
            </div>
        </div>
    </div>
</div>

.js

$(document).ready(function () {

$.each(applicationview.viewModel.SupportedPriorities(), function (i, v) {
    ActivityMonthData(i, v);
});
}

function ActivityMonthData($this, priorityObj) {
var priorityMonth = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var timeFrame = priorityObj.TimeFrames();

if (timeFrame.trim().length > 0 && timeFrame.trim() != "On-going") {
    var startMonth = jQuery.inArray(timeFrame.split('-')[0].trim(), priorityMonth);
    var endMonth = (timeFrame.split('-').length > 1) ? jQuery.inArray(timeFrame.split('-')[1].trim(), priorityMonth) : startMonth;
} else {
    var startMonth = 0;
    var endMonth = 11;
}

var temp1 = priorityMonth.slice(startMonth, priorityMonth.length);
var temp2 = priorityMonth.slice(endMonth, priorityMonth.length);
priorityMonth = $.merge(temp1, temp2);

var activityMonth = startMonth;
var activityTotalMonth = [];
for (var i = startMonth; i <= startMonth + 2; i++) {
    activityMonth = activityMonth + 1;
}
for (var j = 0; j <= activityMonth; j++)
    activityTotalMonth.push(j);

$.each(activityTotalMonth, function (i, v) {
    var div = $('<div>').addClass('counts')
    $('.bar-steps').append(div);
});

}

在最后的 .js 文件中，我根据类 .bar-steps 的 activityTotalMonth 的值动态生成 div，代码工作正常也是。但是，在运行时，UI 会显示由 $.each 语句迭代的所有循环值的组合，并在每个渲染的局部视图上显示相同数量的 div。

如何根据渲染的不同局部视图的 activityTotalMonth 的值渲染 div

Answer 1

$('.bar-steps') 应用于整个页面上具有该类名的所有 div ...这就是您获得类似输出的原因。而且由于您已经在使用 Knockout，因此您无需使用 jquery 进行 DOM 操作（使用 for $.each 创建 div 的方式）。所以对你来说一个好的解决方案应该是在 activityMonth 上使用 Knockout“foreach”绑定

//replace 
//var activityTotalMonth = [];
$this.activityTotalMonth = ko.observableArray();

//modify your HTML with this 
<div class="bar-steps" data-bind="foreach:activityTotalMonth">                    
 <div class="counts">...</div>
</div>