基于对象属性创建动态内容

我正在研究基于对象类型创建动态内容的应用程序。对象类型可以是'公司'或'员工'。基于对象属性创建动态内容

类型为'employee'的对象是使用引导模式创建的。

我正面临一个小问题，当我这样做。

当我生成动态内容时，动态内容会重复。另外，当我使用模式添加连续的对象时，内容会刷新或丢失。

如何解决呢？

这里是我的代码

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(); 
 
} \t \t

.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"> 
 
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
\t \t <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>

来源

2017-05-02 Sunny

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

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小提琴。希望它有帮助

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

来源

2017-05-02 18:49:50

基于对象属性创建动态内容

回答

相关问题