淘汰赛“与”绑定答案

【问题标题】：Knockout "with" binding淘汰赛“与”绑定
【发布时间】：2013-10-31 09:53:10
【问题描述】：

我正在尝试使用“with”绑定在数组中显示后代元素。但它只显示“练习”中的最后一项，我想看到所有这些。怎么可能解决这个问题？之后，如何使数组中的每个项目都可编辑？

我的视图模型：

    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());

观点：

<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>

这是 jsfiddle 的代码： http://jsfiddle.net/9TrbE/

谢谢！

【问题讨论】：

做一个 foreach：excersises Inside With binding？
*而不是绑定
尝试使用foreach，没有成功。

标签： javascript jquery mvvm knockout.js

【解决方案1】：

您声明为对象的练习属性应该是一个数组。

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

所以你可以使用这个视图：

<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>

声明：

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

就是这样：

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

【讨论】：

好的，但是不能让它像一个对象一样声明吗？后来我想把“sets”和“reps”链接到每个“exercise”，所以我认为把它当作对象可能会更好。
@Yuriy 不，因为您试图拥有一个具有相同名称的n 属性的对象。你如何区分exercises.name 和exercises.name？每个exercise 是一个对象，它可以有属性name sets 和reps，但exercises（复数）是exercise 对象的数组。
我明白了。好的，我尝试将练习属性更改为数组，但仍然没有成功。这是我现在得到的输出。 jsfiddle.net/vDDky
@Damien 使用 foreach 以及将练习声明为数组，现在它可以工作了。谢谢！

【解决方案2】：

用这个得到它这是 jsfiddle 的这段代码

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

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

【讨论】：