2

我正在尝试创建一个简单的接口来生成 JSON 格式的数据。可以成功添加第一个对象。但是当我尝试添加另一个（将其附加到“myDict”数组对象：请参见下面的代码）时，原始对象的值被覆盖，并且我似乎也添加了一个空键/值对。

我猜这与每次将新对象添加到“myDict”时不创建“createObj”对象的新实例有关。所以，我试图找出如何动态创建新实例。到目前为止，这是我的代码：

// VARIABLES
var myDict = [];

// CLASSES
function createObj() {
    this.myObj = {};
}
createObj.prototype.newPair = function() {
    this.newKey = document.getElementById('key').value;
    this.newValue = document.getElementById('value').value;
    this.myObj[this.newKey] = this.newValue;

    console.log(this.myObj);

    document.getElementById('key').value = null;
    document.getElementById('value').value = null;
    document.getElementById('key').focus();
}
createObj.prototype.addIt = function() {
    myDict.push(this.myObj);
    console.log(myDict);
}

// ACTIONS
$('#createNew').click(function() {
    $('#item').show();
    var myItem = new createObj();

    $('button#create').click(function() {
        myItem.newPair();
    });

    $('#done').click(function() {
        $('#item').hide();
        myItem.addIt();
    });
});

我在这里查看了一个类似的 Stack Overflow 问题：动态创建对象实例的约定是什么？

. . . 但它似乎没有为我的问题提供任何答案。如果有帮助，这里是 JSFiddle：http: //jsfiddle.net/mysterexs/rffmV/

注意：JSFiddle 不显示输出，但它为您提供所有代码并提供更多上下文。任何帮助表示赞赏。

4

2 回答 2

0

I know very little about JQuery, but your problem seems to be that you add a new event handler each time(in the first event handle), and it adds extra property to myItem(because of the closure the function still has access to it), and extra object to the array(same reason). Do something like this:

var myItem;
// ACTIONS
$('#createNew').click(function () {
    $('#item').show();
    myItem = new createObj();

});
$('button#add').click(function () {  
        myItem.newPair();
    });
$('#done').click(function () {
        $('#item').hide();
        myItem.addIt();
    });

I used a global variable like to make it easy, you could find some better solutions.

于 2013-10-12T18:09:39.720 回答
0

您的情况很有趣，因为一方面，您创建了一个类，在该类中定义了原型属性，并实例化了一个类。另一方面，任何时候都只存在一个类的实例，从而使该类变得不必要。通过检查可以直接检测到一些奇怪的行为，即您同时创建了一系列文本框并销毁它们，这意味着它们的值将始终保留在一个位置。

这是解决这些问题的小提琴，请记住 HTML 标记已更改以确保 ID 不会在同一页面上重复。

// VARIABLES
var myDict = [];

// CLASSES
function createObj() {
    this.myObj = $('.item').eq(0);
}
createObj.prototype.newPair = function () {
    var newPair = this.myObj.clone();
    $('#container').append(newPair);
    newPair.find('.key').focus();
}
createObj.prototype.addIt = function () {
    myDict = [];
    $('.item').each(function (i, o) {
        var item = $(o);
        myDict.push({
            'key': item.find('.key').val(),
            'value': item.find('.value').val()
        });
    });
    console.log(myDict);
}

// ACTIONS
var myItem = new createObj();
$('.item').hide();

$('#createNew').click(function () {
    $('.item').show();
});
$('#add').click(function () {
    myItem.newPair();
});

$('#done').click(function () {
    $('.item').hide();
    myItem.addIt();
});
于 2013-10-12T18:28:09.247 回答