CODEWITHSUNDEEP
jqueryasp.net-mvc-4knockout.js
Running Rabbit
Running Rabbit

Reputation: 2720

Knockout JS - if data binding inside foreach data binding

I am trying to get a if condition inside a foreach binding but it is not working for me. Below is the code that I tried:

View

<div class="section-wrap break" id="ServicePlan_PrioritySection" data-bind="foreach:applicationView.ViewModel.AllPersonal">
            <div data-bind="if:IsValidServicePlan(applicationView.ViewModel.AllPersonal[0], false)">
            @{Html.RenderPartial("~/Views/Home/ServicePlan/_Priority1.cshtml");}
        </div>

The Function that Is called

function IsValidServicePlan(priority, checkDetailFlag) {
var upActivityTempArr = ko.observableArray([]);

ko.utils.arrayForEach(priority.UpcomingActivities(), function (activity) {
    if (activity != undefined)
        if (!IsValidActivity(activity))
            upActivityTempArr.push(activity); // push valid Activity
});
ko.utils.arrayForEach(upActivityTempArr(), function (activity) {
    if (activity != undefined)
        priority.UpcomingActivities.remove(activity); // push valid Activity
});

if (hasValue(priority.Detail())
|| hasValue(priority.TimeFrames())
|| hasValue(priority.Feedback.SatisfactionLevel()) && priority.Feedback.SatisfactionLevel() != Satisfaction_Level
|| hasValue(priority.Feedback.FeedbackComment()) && priority.Feedback.FeedbackComment() != "Add Comment"
    ) {
    return true;
}}

When The function is called from the if condition, the priority parameter comes out as undefined. My requirement is that when the foreach loop is run, it will check and render the partial view only for those whose value is not empty. How will i resolve this to get this resolved?

Many thanks in advance.

Upvotes: 0

Views: 794

Answers (1)

super cool
super cool

Reputation: 6045

Scope Issue as you are trying to access applicationView.ViewModel.AllPersonal[0] in child level where it doesn't exists , tough it exists at $parent & root level .

You can cut short you binding in view using $data which refers to current context rather going with a broader way ($parent.applicationView.ViewModel.AllPersonal[0]) in view

view:

<div class="section-wrap break" id="ServicePlan_PrioritySection" data-bind="foreach:applicationView.ViewModel.AllPersonal">
<div data-bind="if:IsValidServicePlan($data,false)">
 @{Html.RenderPartial("~/Views/Home/ServicePlan/_Priority1.cshtml");}
</div>

As a proper altenative you use .bind or function syntax in your view (as mentioned in comments)

Upvotes: 1

Related Questions