javascript - 如何将数据与json对象数据链接？

我有以下JSON对象，它在其中维护序列。

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>

因此，每当我插入对象时，它都应该更新索引的顺序。

在给定的示例中，如果我将一个对象插入sample [0]中example的第一个索引中。（考虑example数组索引从零开始）。

因此，当我将一个对象插入第一个参数时，其余对象中的序列应根据索引进行更新。

我该如何实现。

将父索引设置为0，子索引设置为1。

预期的输出，

注意：额外的“ xxx”：“ yyy”用于区分目的。

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

        }
      ]
    }
    ]
    };

更新：：也尝试了linkTo。

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

仍未获得预期的输出。
提前致谢。

最佳答案

JsRender和JsViews都不会修改它们正在渲染的JSON数据。这是设计使然：数据没有副作用...

另一方面，您可以编写代码以对数据产生副作用，或者可以使用双向绑定，以便用户可以修改数据值。但是双向绑定只会更改目标数据值，而不会更改其他位置的其他值，并且仅当用户在该<input>上触发更改事件时才会这样做。

在您的情况下，您希望对examples数组进行任何可观察到的更改，以触发对该数组中所有examples的更改，以确保每个example.sequence的index+1值始终等于example。在这种情况下，您必须编写代码才能做到这一点。

一种实现方法是使用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);
    })
  }
});

这将确保sequence值不仅在插入时保持同步，而且在删除项目或更改项目顺序等时也保持同步。