如何将索引与 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>

所以每当我插入对象时，它应该根据索引更新序列。

在给定的示例中，如果我将一个对象插入示例[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.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 值不仅在插入时保持同步，而且在删除项目或更改项目顺序等时也保持同步。

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

how to datalink the index with the json object?

javascript

jquery

json

jsrender

jsviews