Question

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

具有“employee”类型的对象是使用bootstrap模式创建的。

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

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

我该如何解决？

这是我的代码

<View  style={style.buttonViewStyle}>
       <Button title="Facebook" color="blue" onPress={this.onFacebookPress} />
   </View>

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;
}

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

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

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

1 个答案: