如何将索引与 json 对象进行数据链接？

Question

我有以下 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] 中示例的第一个索引中。（考虑示例数组索引从零开始）。

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

我怎样才能实现它。

将父索引设为 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>

仍然没有得到预期的输出。 提前致谢。

Answer 1

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

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

在您的情况下，您希望对 examples 数组的任何可观察更改触发对数组中所有 examples 的更改，例如确保每个 example 的 example.sequence 值始终等于 index+1 .在这种情况下，您必须编写代码来执行此操作。

实现此目的的一种方法是使用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 值不仅在插入时保持同步，而且在删除项目或更改项目顺序等时保持同步。