Javascript 在Aurelia中创建新记录--JSON编码出错？

我正在创建一个Aurelia应用程序，它成功地从API中提取记录，编辑并保存对单个记录的更改，以及删除单个记录。然而，我似乎无法解决创建新记录的问题

在calendar.js中，我有一个由表单按钮调用的函数newCalendar（）

newCalendar() {
    this.selectedId = this.error = null;
    this.calendar = [];
    this.calendar.cal_name_tran = "New Calendar";
    this.calendar.cal_name_orig = "Nuevo Calendario";
    console.log(this.calendar);
    console.log(JSON.stringify(this.calendar));
    $('#edit_calendar').modal('show');
    $('#cal_name_orig').focus();
}

单击按钮时，控制台日志中会显示以下文本：

[cal\u name\u tran:“新日历”，cal\u name\u orig:“新日历”]
[]

文本“New Calendar”和“Nuevo Calendario”已成功绑定到模式形式的视图

<form>
    <div class="form-group">
        <label class="control-label" for="cal_name_orig">Calendar name</label>
        <input type="text" class="form-control" id="cal_name_orig" placeholder="${'Calendar_Example_Name'&t}" value.bind="calendar.cal_name_orig & validate">
    </div>
    <div class="form-group">
        <label class="control-label" for="cal_name_tran">Translated name</label>
        <input type="text" class="form-control" id="cal_name_tran" value.bind="calendar.cal_name_tran & validate">
    </div>
</form>

---

为什么

JSON.stringify（this.calendar）

在

this.calendar

显示数组的值时会导致空数组？

既然您希望日历包含键值对，可以将其设为对象（而不是数组）

JSON.stringify

需要一个有效的JSON（也可以是数组）。在您的示例中，虽然您将

日历创建为一个数组，但您将其用作一个对象

如果希望它是一个数组，则必须使用
push
方法：

this.calendar = [];
this.calendar.push("New Calendar", "Nuevo Calendario");

由于希望日历包含键值对，因此可以将其设置为对象（而不是数组）

JSON.stringify
需要一个有效的JSON（也可以是数组）。在您的示例中，虽然您将
日历创建为一个数组，但您将其用作一个对象

如果希望它是一个数组，则必须使用
push
方法：

this.calendar = [];
this.calendar.push("New Calendar", "Nuevo Calendario");

由于实际问题已经得到回答，因此无需对此答案进行表决。我想提到你的代码有一个问题

在
newCalendar
函数中，有两行代码使用jquery处理视图中的元素：

$('#edit_calendar').modal('show');
$('#cal_name_orig').focus();

你在这里使用ID。我想指出的是，在使用Aurelia时，这是不必要的，也是不鼓励的。您可以使用Aurelia提供的
ref
自定义属性，而不是使用id来引用元素。
ref
属性允许您在VM上创建对DOM元素的引用作为属性。让我们看看
cal\u name\u orig
文本框：

<input type="text" 
       class="form-control" 
       id="cal_name_orig" 
       placeholder="${'Calendar_Example_Name'&t}" 
       value.bind="calendar.cal_name_orig & validate">

现在这个元素在VM中可用，使用<代码> .CalnNAMEYORIG（可以考虑重命名这一点以匹配JS命名约定）。因此，不是：
 $('#cal_name_orig').focus();

你可以做：

  $(this.cal_name_orig).focus();

现在，您不必担心应用程序的其他部分存在id命名冲突

这不是你能做的唯一的参考类型。要了解更多信息，请查看我们的文档：

谢谢
 没有必要对这个答案投赞成票，因为实际问题已经得到了回答。我想提到你的代码有一个问题

在
newCalendar
函数中，有两行代码使用jquery处理视图中的元素：

$('#edit_calendar').modal('show');
$('#cal_name_orig').focus();

你在这里使用ID。我想指出的是，在使用Aurelia时，这是不必要的，也是不鼓励的。您可以使用Aurelia提供的
ref
自定义属性，而不是使用id来引用元素。
ref
属性允许您在VM上创建对DOM元素的引用作为属性。让我们看看
cal\u name\u orig
文本框：

<input type="text" 
       class="form-control" 
       id="cal_name_orig" 
       placeholder="${'Calendar_Example_Name'&t}" 
       value.bind="calendar.cal_name_orig & validate">

现在这个元素在VM中可用，使用<代码> .CalnNAMEYORIG（可以考虑重命名这一点以匹配JS命名约定）。因此，不是：
 $('#cal_name_orig').focus();

你可以做：

  $(this.cal_name_orig).focus();

现在，您不必担心应用程序的其他部分存在id命名冲突

这不是你能做的唯一的参考类型。要了解更多信息，请查看我们的文档：

谢谢
 谢谢大家!！我想这一定是显而易见的，但没有意识到括号之间的区别。花括号总是表示对象，方括号总是使用数组吗？是的，正是这样。谢谢！我想这一定是显而易见的，但没有意识到括号之间的区别。花括号总是表示对象，方括号总是使用数组吗？是的，正是这样。我知道你说过你不需要向上投票，但说实话，这很有帮助！！！谢谢你的支持。我知道你说过你不需要投票，但说实话，这很有帮助！！！谢谢你的超越。