how to datalink the index with the json object?

I have the following JSON object which maintain the sequence in it.

var sample={
  "sample": [
    {
      "example": [
        {
          "sequence": 1, 
        },
        {
        	"sequence":2
        },
        {
        	"sequence":3
        }
      ]
    },
     {
      "example": [
        {
         "sequence": 1,
      
        }
      ]
    }
    ]
    };
         $.templates("testingTemplate", "#testingSection");
	
var html=$.link.testingTemplate("#htmlHolder", sample);
$("#insert").click(function(){
var childIndexVal=parseInt($("#childIndex").val());
var x= {
          "sequence": childIndexVal+1,
          "xxx":"yyy"
        };
var parentIndexVal=parseInt($("#parentIndex").val());

$.observable(sample.sample[parentIndexVal].example).insert(childIndexVal,x);
console.log(sample);
});

.parentHolder
{
  border:1px solid red;
  padding:5px;
  margin:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.80/jsviews.js"></script>
<script id="testingSection" type="text/x-jsrender">

{{if sample && sample.length}}
	
	{^{for sample }}
  <div class="parentHolder">
  	{^{for example }}
      <div><span data-link="#index+1" ></span>
      <input type="text" value="{{:sequence}}" id="sequence" data-link="#index+1"></div>
    {{/for}}
     </div>
  {{/for}}

 {{/if}}
 </script>
 <div id="htmlHolder">
 
 </div>
 <div class="messages">
 
 </div>
 <span>Parent Index:</span><input type="text" id="parentIndex"/>
 <span>Child Index:</span><input type="text" id="childIndex"/>
 <button id="insert" >Insert</button>

so whenever I insert the object it should update the squence accodring to the index.

In the given example, if I am inserting an object into the 1st index of example in sample[0].(consider example array index starts from zero).

So when I am inserting one object into first parameter, the sequence in the remaining object should updated according to the index.

How can I achieve it.

give parent Index as 0 and child index as 1.

expected output,

Note: extra "xxx":"yyy" for differntiation purpose.

var sample={
  "sample": [
    {
      "example": [
        {
          "sequence": 1, 
        },
    {
        "sequence": 2, 
         "xxx":"yyy"
    }
        {
            "sequence":3
        },
        {
            "sequence":4
        }
      ]
    },
     {
      "example": [
        {
         "sequence": 1,

        }
      ]
    }
    ]
    };

Update: : tried with linkTo also.

<input type="text"   data-link="linkTo=sequence #index+1" ></div>

Still not getting the expected output. Thanks in advance.

Solution

Neither JsRender nor JsViews will modify the JSON data that they are rendering. This is by design: there are no side-effects on the data...

On the other hand, you can write code to create side-effects on the data, or you can use two-way binding so a user can modify data values. But two-way binding will only change the targetted data value, not other values elsewhere, and will do so only when the user triggers a change event on that <input> for example.

In your case you want any observable changes to an examples array to trigger changes to all examples in the array such as to ensure the example.sequence value is always equal to the index+1 for each example. In that case you have to write code to do that.

One way you can achieve that is to add the following code using observeAll:

$.observable(sample).observeAll(function(ev, eventArgs) {
  if (ev.type==="arrayChange" && ev.data.observeAll.path().slice(-7)==="example") {
    $.each(ev.currentTarget, function(i, item) {
      $.observable(item).setProperty("sequence", i+1);
    })
  }
});

That will ensure that the sequence value stays in sync not only for insert, but also when items are removed or for changes in the the order of items, etc.