根据对象属性创建动态内容

Question

我正在开发基于对象类型创建动态内容的应用程序。 对象类型可以是“公司”或“员工”。

“员工”类型的对象是使用引导模式创建的。

我在这样做时遇到了一个小问题。

当我生成动态内容时，它会被复制。此外，当我使用模态添加连续对象时，内容会刷新或丢失。

我该如何解决？

这是我的代码

var myData = [{
  company: "ABC",
  url: "www.abc.com",
  type: "company"
}, {
  company: "CDE",
  url: "www.cde.com",
  type: "company"
}, {
  company: "DEF",
  url: "www.def.com",
  type: "company"
}];

$('#createData').click(function() {
  createDisplay();
});
function createDisplay() {
//$('.box').html('');
  myData.forEach(function(obj) {
  if(obj.type==="company"){
    $('.container').append(
      $('<div>').addClass('box').append(
      $('<label>').text('Company Website: '),
      $('<a>').addClass('compUrl').attr('href', obj.url).text(obj.company)
      )
    );
  } else if(obj.type==="employee"){
    $('.container').append(
      $('<div>').addClass('box').append(
      $('<label>').text('Employee Name: '),
      $('<span>').text(obj.employee),
      $('<br /><label>').text('Company: '),
      $('<span>').text(obj.company),
      )
    );
  }
  });
}

$('#updateForm').submit(function(){
  createEmp();
  return false;
});
$(document).on('click', '.edit-btn', function(){
  index = getIndex(this);

});

function createEmp(){
  var obj = {
    "employee" : $('#empName').val(),
    "profile" : $('#empProfile').val(),
    "company" : $('#comp').val(),
    "type" : "employee"

  }
  //console.log(obj);
  myData.push(obj);
  createDisplay();
}		 

.box {
  height: 100px;
  background-color: skyblue;
  border: 1px solid black;
  margin-top: 5px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">

</div>

<button class="btn btn-info" id="createData">Create divs</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#addEmpForm">Add Employee</button>
<!-- Modal -->

<div class="modal fade" id="addEmpForm" role="dialog">
  <div class="modal-dialog">
  <div class="modal-content">
    <!-- Modal Header -->
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">
      <span aria-hidden="true">&times;</span>
      <span class="sr-only">Close</span>
    </button>
    <h4 class="modal-title" id="myModalLabel">Add Employee</h4>
    </div>
    <form id="updateForm">
    <!-- Modal Body -->
    <div class="modal-body">
      <div class="form-group">
      <label class="col-sm-4 control-label" for="empName">Employee Name</label>
      <div class="col-sm-8">
        <input type="text" class="form-control" id="empName" required/>
      </div>
      </div>
      <div class="form-group">
      <label class="col-sm-4 control-label" for="empProfile">Profile</label>
      <div class="col-sm-8">
        <input type="url" class="form-control" id="empProfile" required/>
      </div>
      </div>
      <div class="form-group">
      <label class="col-sm-4 control-label" for="comp">Company</label>
      <div class="col-sm-8">
        <input type="text" class="form-control" id="comp" required/>
      </div>
      </div>
    </div>
    <!-- Modal Footer -->
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">
      Close
      </button>
      <button class="btn btn-primary">
      Save changes
      </button>
    </div>
    </form>
  </div>
  </div>
</div>

Answer 1

每次迭代对象数组时，向对象添加属性以保持其视图状态。

function createDisplay() {
        myData.forEach(function (obj) {
            if (obj.type === "company" && !obj.shown) {
               obj.shown = true;
                $('.container').append(
                    $('<div>').addClass('box').append(
                        $('<label>').text('Company Website: '),
                        $('<a>').addClass('compUrl').attr('href', obj.url).text(obj.company)
                    )
                );
            }
            else if (obj.type === "employee" && !obj.shown) {
            obj.shown = true;
                $('.container').append(
                    $('<div>').addClass('box').append(
                        $('<label>').text('Employee Name: '),
                        $('<span>').text(obj.employee),
                        $('<br /><label>').text('Company: '),
                        $('<span>').text(obj.company)
                    ));
            }
        });
    }

请通过下面的 js fiddle。希望对你有帮助

https://jsfiddle.net/ganesh2412/6eknc4hy/