Javascript 将模态数据绑定到敲除模型

我试图让twitter引导模式打开一个窗口，其中有一个可编辑的文本区域，然后在保存时保存相应的数据。我当前的代码：

HTML:

小提琴：

正如你在小提琴中看到的，模态打开时会显示文本框，但我不知道如何将“注释”文本输入模态，或者在按下“保存”按钮时更新注释

有什么想法吗

另外，我是个新手，所以如果有什么不对劲的地方，请随时纠正我

更新：

我一直在修改代码，并且能够将“注释”放入模式中，但是到目前为止我还不能成功地更新它。我最终会遇到的另一个问题是，我只希望在单击“保存”时更新注释，而不是在模糊上进行常规更新。我真的认为我走错了方向，但我不确定什么是正确的方向。非常感谢您的帮助

这里是一个可以编辑每个条目注释的对话框。下面是我如何得到这个的

视图模型 首先，我喜欢把我的观点分成几个部分。对于每种类型的局部视图，我都创建一个ViewModel。“上层”视图模型用作所有局部视图模型的容器。这里您需要一个EntryDataViewModel，我是这样定义的：

var EntryDataViewModel = function (rawEntryData) {
    var self = this;
    self.entry_data_id = rawEntryData.entry_data_id;
    self.entry_id = rawEntryData.entry_id;
    self.entry_hours = rawEntryData.entry_hours;
    self.entry_date = rawEntryData.entry_date;
    self.comment = ko.observable(rawEntryData.comment);
} 

基本上，此构造函数将原始数据转换为您可以在视图中操作的数据。取决于你想做什么，你可以让事情变得可见或不可见<代码>注释在某些绑定中使用，预计会更改。我们希望页面对其更改做出动态反应，所以让我们让它变得可观察。
由于此更改，我们将更改创建“上层”视图模型的方式（此处为

TimeEntriesModel

），特别是：

self.entries = ko.observableArray(ko.utils.arrayMap(entries, function (entry) {
    return {
        entry_id: entry.entry_id, //same as before
        project_id: entry.project_id, // same as before
        user_id: entry.user_id, // same as before
        entry_data: ko.observableArray(entry.entry_data.map(function (entry_data) {
            return new EntryDataViewModel(entry_data); // here we use the new constructor
        }))
    }
}));

现在，我们的ViewModels已准备好进行更新那么让我们更改模式

模态 同样，在模式中，

注释

可能会发生更改，我们希望检索其值（以更新EntryData）。所以它是可观察的。
现在我们必须通知我们正在修改的EntryData的模式（我认为这是您的代码缺少的主要部分）。我们可以通过保留用于打开模式的EntryData的引用来实现这一点：

self.modal = {
   ...
   comment:ko.observable(""),
   entryData : undefined,
   ...
}

self.showModal = function (entryDataViewModel) {
    // modal.comment is already updated in your bindings, but logic can be moved here.
    self.modal.entryData = entryDataViewModel; // keep track of who opened the modal
    self.modal.show(true);
}

最后一件事是在打开模式时更新所有这些变量：

self.modal = {
   ...
   comment:ko.observable(""),
   entryData : undefined,
   ...
}

self.showModal = function (entryDataViewModel) {
    // modal.comment is already updated in your bindings, but logic can be moved here.
    self.modal.entryData = entryDataViewModel; // keep track of who opened the modal
    self.modal.show(true);
}

保存时：

self.onModalAction = function () {
    self.modal.entryData.comment(self.modal.comment()); //save the modal's comment into the entryData.
    self.modal.show(false);
}

结论 我不想更改您的所有绑定和代码，因此有很多小的更改，我认为您必须使用这些代码来查看它们如何影响页面的行为和工作方式我的解决方案当然不是完美的。HTML标记中仍然存在一些必须移动到JS的逻辑，我不确定您是否真的需要所有自定义绑定的东西。此外，我对模态不满意。模态内容应该属于一个

EntryDataViewModel

，因为编辑注释只作用于一个EntryData，但是正如我所说的，我不想更改所有代码。如果我的解决方案有问题，请告诉我：）

更新（进一步操作的一些提示） 当我说“将逻辑从HTML移动到JS”时，我的意思是。以下绑定看起来很复杂，属于HTML标记

<a class="comment" data-bind="click: function() { $root.modal.comment(comment()); $root.showModal($data); }, css: { 'has-comment': comment().length > 0, 'needs-comment': comment().length == 0 }, attr: { title: comment() }">

您可以执行以下操作：将

$root.modal.comment（comment（））

移动到

showModal

，然后您的单击绑定变成

click:$root.showModal

。即使“需要注释”绑定有一个逻辑，您也可以向包含此逻辑的

EntryDataViewModel

添加一个方法

needsComment

。
请记住，HTML标记不应该包含任何逻辑，它应该只调用JS函数。如果函数作用于部分视图（例如EntryData），则该函数属于部分视图模型（这就是我抱怨模态的原因，该模态仅作用于一个EntryData，但位于

TimeCenter模型中）。如果函数操作一组元素（例如，如果创建“添加”按钮），则此函数属于容器ViewModel

这是一个非常长且具体的回答。对此表示歉意。您应该能够在web上的Model-View-ViewModel（MVVM）上找到很多资源，这些资源将在您的旅程中为您提供帮助：）
值得一提的是，我编写该项目是为了在使用Knockout时使模态更易于使用

欢迎对其进行任何反馈，无论如何，我希望它能对我有所帮助。
这是我最初的想法，但当我试图将其连接回原始注释时，问题出现了，原始注释嵌套在条目中。我似乎无法保持原始可观测数据和模态可观测数据之间的联系。我不确定你是否完全明白我试图用它来做什么（或者你明白了，我只是不明白你在说什么），但想法是TimeEntriesModel保存条目数据，而这个条目数据包括7个条目（对应于一周中的几天）。这7个条目各有一个小时数和一条与之相关的注释。我正在尝试将这些条目中的注释输入到模式中，然后可以编辑和保存（或不编辑）.你描述的方式似乎与此不符。如果我错了，请纠正我。感谢你迄今为止的帮助！@Samsquanch请检查这把小提琴：告诉我这是否是你期望的行为。如果这是你期望的，我将帮助你理解我所做的：）这似乎很好，谢谢大家。如果您能更新您的答案，并概述您为使其生效所做的工作，我将不胜感激，我将接受它。@Samsquanch请参阅。我更改了绑定并将一些逻辑移到了
EntryDataViewModel
中。