CODEWITHSUNDEEP
javascriptjquerymvvmknockout.js
Yuriy
Yuriy

Reputation: 83

Knockout "with" binding

I am trying to display descendant elements in array using "with" binding. But it displays only last items in "exercises" and I want to see all of them. How is it possible to fix this? And after that, how can I make each item in array editable?

My ViewModel:

    function AppViewModel() {   
    var self = this;

    self.workouts = ko.observableArray([
        {name: "Workout1", exercises:{
            name: "Exercise1.1",
            name: "Exercise1.2",
            name: "Exercise1.3"
        }},
        {name: "Workout2", exercises:{
            name: "Exercise2.1",
            name: "Exercise2.2",
            name: "Exercise2.3"
        }},
        {name: "Workout3", exercises:{
            name: "Exercise3.1",
            name: "Exercise3.2",
            name: "Exercise3.3"
        }},        
        {name: "Workout4", exercises:{
            name: "Exercise3.1",
            name: "Exercise3.2",
            name: "Exercise3.3"
        }},        

]);

    self.removeWorkout = function() {
        self.workouts.remove(this);
    };
}

ko.applyBindings(new AppViewModel());

The View:

<div class="content">
    <ul data-bind="foreach: workouts">
        <li>
        <span data-bind="text: name"> </span>
         <a href="#" data-bind="click: $parent.removeWorkout">Remove</a>
         <ul data-bind="with: exercises">
            <li data-bind="text: name"></li>
         </ul>
        </li>
    </ul>   
</div>

Here's this code at jsfiddle: http://jsfiddle.net/9TrbE/

Thanks!

Upvotes: 1

Views: 2652

Answers (2)

Hammad
Hammad

Reputation: 1

Get it with this Here's this code at jsfiddle

self.workouts = ko.observableArray([
    {name: "Workout1", exercises:[
        { name: "Exercise1.1" },
        { name: "Exercise1.2" },
        { name: "Exercise1.3" }
    ]},
]);

`http://jsfiddle.net/9TrbE/8/

Upvotes: 0

Damien
Damien

Reputation: 8987

The exercises property you declared as an object should be an array.

self.workouts = ko.observableArray([
    {name: "Workout1", exercises:[
        { name: "Exercise1.1" },
        { name: "Exercise1.2" },
        { name: "Exercise1.3" }
    ]},
]);

So you can use this view : 

<div class="content">
    <ul data-bind="foreach: workouts">
        <li>
        <span data-bind="text: name"> </span>
         <a href="#" data-bind="click: $parent.removeWorkout">Remove</a>
         <ul data-bind="foreach: exercises">
            <li data-bind="text: name"></li>
         </ul>
        </li>
    </ul>   
</div>

Declaring : 

var exercises = {
    name: "Exercise1.1",
    name: "Exercise1.2",
    name: "Exercise1.3"
};

Is like doing that :

var exercises = {
    name: "Exercise1.1",
};
exercises.name: "Exercise1.2";
exercises.name: "Exercise1.3";

Upvotes: 5

Related Questions