使用JQuery绑定mvvm数据源

Question

我有以下内容：

<div class="container" data-bind="source: content" data-template="content-template"></div>

在 JS 中，我想动态添加更多 DIV（更好：克隆 .container DIV）并将数据绑定源更改为 content2、content3 ...

基本上我想要这个：$(".question.clone2").data("source", content2) ...

正确的语法是什么？

Answer 1

试试这个：

var clone = $('.container').clone(); // use .first() if there are more then one .container class

$(clone).data("source", "content2");

Answer 2

$(document).ready(function(){
  var clone = $('.container').first().clone();//clone first container div
  (clone).insertAfter('.container'); // inser clone after last container div
  var length = $('.container').length; // get how many container divs are there
  $('.container').last().attr('data-bind',"source: content"+length+""); //change last container div data-bind value (in autoincremeneted fashion like content2,content3,....)
});

.container{
  float:left;
  width:40%;
  height:200px;
  background:grey;
  padding:10px;
  margin:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" data-bind="source: content" data-template="content-template"></div>

使用JQuery绑定mvvm数据源

Use JQuery to bind mvvm data source

data-binding

jquery

datasource

kendo-ui