Javascript KnockoutJS-绑定不会使用映射插件更新

我在Knockout中有一个视图模型，它使用映射插件进行映射。我需要这样做，因为数据（JSON对象）将使用Ajax调用从服务器检索

我的问题是，当我修改表单时，对象中的映射数据不会更新

您还可以在以下JSFIDLE中看到这一点：

以下是从服务器检索到的我的对象：

var dataContent = 
[
    {
        playerId: 2,
        playerName: "allo",
        evaluatedExercises: 
        [
            {
                id: 1,
                evaluationExerciseId: 1,
                numberOfTries: 6,
                tries: [
                    {
                    id: 0,
                    number: 0,
                    result: 0
                    }
                ]
            }       
        ]
    }
]

以下是完整的javascript视图模型：

function Try(id, number, result) {
    var self = this;

    self.id = id;
    self.number = number;
    self.result = result;
}

function ExerciseResult(id, evaluationExerciseId) {
    var self = this;

    self.id = id;
    self.evaluationExerciseId = evaluationExerciseId;
    self.tries = [];
}

function PlayerEvaluation(playerId, playerName) {
    var self = this;

    self.playerId = playerId;
    self.playerName = playerName
    self.evaluatedExercises = [];
}

function appViewModel() {
    var self = this;

    self.playersEvaluation = ko.observableArray();

    self.exportToJSON = ko.computed(function() {
        return ko.toJSON(self.playersEvaluation);
    }, this);

}

var viewModel = new appViewModel();

var dataContent = 
[
    {
        playerId: 2,
        playerName: "allo",
        evaluatedExercises: 
        [
            {
                id: 1,
                evaluationExerciseId: 1,
                numberOfTries: 6,
                tries: [
                    {
                    id: 0,
                    number: 0,
                    result: 0
                    }
                ]
            }       
        ]
    }
]

for(i = 0; i < dataContent.length; i++) {
    playerEvaluation = new PlayerEvaluation(dataContent[i].playerId, dataContent[i].playerName);

    evaluatedExercises = dataContent[i].evaluatedExercises;

    for(j = 0; j < evaluatedExercises.length; j++) {    
        exerciseResult = new ExerciseResult(evaluatedExercises[j].id, evaluatedExercises[j].evaluationExerciseId);
        tries = evaluatedExercises[j].tries;

        for(k = 0; k < tries.length; k++) {
            exerciseTry = new Try(tries[k].id, tries[k].number, tries[k].result)

            exerciseResult.tries.push(exerciseTry);
        }

        playerEvaluation.evaluatedExercises.push(exerciseResult);        
    }

   viewModel.playersEvaluation.push(playerEvaluation);
}

ko.mapping.fromJS(viewModel.playersEvaluation);
ko.applyBindings(viewModel)

函数尝试（id、编号、结果）{
var self=这个；
self.id=id；
self.number=数字；
self.result=结果；
}
函数ExerciseResult（id，evaluationExerciseId）{
var self=这个；
self.id=id；
self.evaluationExerciseId=evaluationExerciseId；
self.tries=[]；
}
函数PlayerEvaluation（playerId、playerName）{
var self=这个；
self.playerId=playerId；
self.playerName=playerName
自我评估练习=[]；
}
函数appViewModel（）{
var self=这个；
self.playersEvaluation=ko.observatarray（）；
self.exportToJSON=ko.computed（函数（）{
返回ko.toJSON（self.playersEvaluation）；
}，这个）；
}
var viewModel=新的appViewModel（）；
var数据内容=
[
{
playerId:2，
玩家名称：“allo”，
评估练习：
[
{
id:1，
evaluationExerciseId:1，
试验次数：6，
尝试：[
{
id:0，
编号:0，
结果：0
}
]
}       
]
}
]
对于（i=0；i

使用KnockoutJS在html中映射此对象：

    <table class="table table-hover table-bordered">
     <thead> <!-- This will be generated with Twig so it is normal that is does not correspond to the data below -->
         <tr>
             <th>Nom</th>
             <th colspan="6" style="text-align:center">Élément #1</th>

         </tr>
         <tr>
             <th></th>

             <th class="try">
                 1                 
             </th>
             <th class="try">
                 2                 
             </th>
             <th class="try">
                 3                 
             </th>
             <th class="try">
                 4                 
             </th>
             <th class="try">
                 5                 
             </th>
             <th class="try">
                 6                 
             </th>  

         </tr>
    </thead>
    <tbody data-bind="foreach: playersEvaluation">
        <tr data-bind="">
            <td data-bind="text: $data.playerName">
            </td>
           <!-- ko foreach: $data.evaluatedExercises -->
            <!-- ko foreach: $data.tries -->
            <td>
                <input type="text" data-bind="value: $data.result" />
            </td>
            <!-- /ko -->
            <!-- /ko -->
        </tr>
    </tbody>
</table>


<div data-bind="text: exportToJSON()">

</div>

笔名
#lément#1
1.
2.
3.
4.
5.
6.

修改输入时，我希望更改反映在我的viewModel的

self.playersEvaluation

变量中。为此，我创建了一个计算函数，它在表下方的div中显示playersEvaluation的内容

但是，div没有更新，因此我得出结论，映射一定不正确。

---

我的映射哪里出了问题？

我对映射插件没有太多的经验，但我相信你应该让它为你构建你的视图模型结构（因为你在视图模型的任何层次上都没有更复杂的逻辑）

---

Fiddle：

最终您的问题是什么？当我修改输入时，更改不会反映在div中，因此映射没有正确完成…就是这样！非常感谢。

function appViewModel() {
    var self = this;
    self.playersEvaluation;   
}

var viewModel = new appViewModel();

// this creates observables for everything in dataContent. the result itself is an observable
// which you can set in your top level view model
viewModel.playersEvaluation = ko.mapping.fromJS(dataContent)
ko.applyBindings(viewModel);