Databases
StackOverflow2013
Postsdbo
POKnockoutJS - binding does not update using mapping plugin
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POKnockoutJS - binding does not update using mapping plugin
    primarykey
    data
    text
    <p>I have a view Model in <em>Knockout</em> that is mapped using the <em>mapping</em> plugin. I need to do so since the data (a JSON object) will be retrieved from a server using Ajax calls. </p> <p>My problem is that when I modify a form, the mapped data isn't updated in the object...</p> <p>You can also see this in action the following JSFiddle: <a href="http://jsfiddle.net/etiennenoel/4EXSy/6/" rel="nofollow">http://jsfiddle.net/etiennenoel/4EXSy/6/</a></p> <p>Here's my object retrieved from the server:</p> <pre><code>var dataContent = [ { playerId: 2, playerName: "allo", evaluatedExercises: [ { id: 1, evaluationExerciseId: 1, numberOfTries: 6, tries: [ { id: 0, number: 0, result: 0 } ] } ] } ] </code></pre> <p>Here is the complete javascript view model:</p> <pre><code>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 &lt; dataContent.length; i++) { playerEvaluation = new PlayerEvaluation(dataContent[i].playerId, dataContent[i].playerName); evaluatedExercises = dataContent[i].evaluatedExercises; for(j = 0; j &lt; evaluatedExercises.length; j++) { exerciseResult = new ExerciseResult(evaluatedExercises[j].id, evaluatedExercises[j].evaluationExerciseId); tries = evaluatedExercises[j].tries; for(k = 0; k &lt; 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) </code></pre> <p>This object is mapped in html using KnockoutJS:</p> <pre><code> &lt;table class="table table-hover table-bordered"&gt; &lt;thead&gt; &lt;!-- This will be generated with Twig so it is normal that is does not correspond to the data below --&gt; &lt;tr&gt; &lt;th&gt;Nom&lt;/th&gt; &lt;th colspan="6" style="text-align:center"&gt;Élément #1&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt;&lt;/th&gt; &lt;th class="try"&gt; 1 &lt;/th&gt; &lt;th class="try"&gt; 2 &lt;/th&gt; &lt;th class="try"&gt; 3 &lt;/th&gt; &lt;th class="try"&gt; 4 &lt;/th&gt; &lt;th class="try"&gt; 5 &lt;/th&gt; &lt;th class="try"&gt; 6 &lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody data-bind="foreach: playersEvaluation"&gt; &lt;tr data-bind=""&gt; &lt;td data-bind="text: $data.playerName"&gt; &lt;/td&gt; &lt;!-- ko foreach: $data.evaluatedExercises --&gt; &lt;!-- ko foreach: $data.tries --&gt; &lt;td&gt; &lt;input type="text" data-bind="value: $data.result" /&gt; &lt;/td&gt; &lt;!-- /ko --&gt; &lt;!-- /ko --&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;div data-bind="text: exportToJSON()"&gt; &lt;/div&gt; </code></pre> <p>When I modify the input, I want the changes to be reflected in the <code>self.playersEvaluation</code> variable of my viewModel. To do so, I created a computed Function that shows the content of the playersEvaluation in a div below the table.</p> <p><strong>However, the div does not get updated and therefore I came to the conclusion that the mapping must not be proper.</strong></p> <p>Where my mapping has gone wrong ?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCoachNono
    1. USCoachNono
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POKnockoutJS - binding does not update using mapping plugin
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhat is your problem, eventually?
      singulars
      1. POKnockoutJS - binding does not update using mapping plugin
      1. USGuilherme Oderdenge
    2. COWhen I modify the input, the changes does not get reflected in the div, therefore the mapping is not properly done...
      singulars
      1. POKnockoutJS - binding does not update using mapping plugin
      1. USCoachNono
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload