我正在尝试将一个 Twitter Bootstrap 模式打开到一个窗口，该窗口中有一个可编辑的文本区域，然后在保存时，它会保存适当的数据。我当前的代码:

HTML:

<table  class="display table table-striped">
    <tbody data-bind="foreach: entries">
        <tr>
            <td>
                Placeholder
            </td>
            <!-- ko foreach: entry_data -->
            <td>
                <div class="input-group">
                    <input type="text" class="form-control col-sm-2" data-bind="value: entry_hours">
                    <span class="input-group-addon"><a class="comment" data-bind="click: function() { $root.modal.comment($data); $root.showModal(); }, css: { 'has-comment': comment.length > 0, 'needs-comment': comment.length == 0 }, attr: { title: comment }"><span class="glyphicon glyphicon-comment"></span></a></span>
                </div>
            </td>
            <!-- /ko -->
        </tr>
    </tbody>
</table>

<!-- Modal template -->
<script id="commentsModal" class="modal-dialog" type="text/html">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-bind="click:close" aria-hidden="true">&times;</button>
            <h4 data-bind="html:header" class="modal-title"></h4>
        </div>
        <div class="modal-body">
            <textarea class="form-control" rows="3" data-bind="value: $root.modal.comment.comment"></textarea>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-bind="click:close,html:closeLabel">Close</button>
            <button type="button" class="btn btn-primary" data-bind="click:action,html:primaryLabel" id="save-changes">Save changes</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</script>

<!-- Create a modal via custom binding -->

<div data-bind="bootstrapModal:modal" class="modal fade" id="commentsModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static"></div>

JS:

/* Custom binding for making modals */
ko.bindingHandlers.bootstrapModal = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var props = valueAccessor(),
            vm = bindingContext.createChildContext(viewModel);
        ko.utils.extend(vm, props);
        vm.close = function() {
            vm.show(false);
            vm.onClose();
        };
        vm.action = function() {
            vm.onAction();
        }
        ko.utils.toggleDomNodeCssClass(element, "modal fade", true);
        ko.renderTemplate("commentsModal", vm, null, element);
        var showHide = ko.computed(function() {
            $(element).modal(vm.show() ? 'show' : 'hide');
        });
        return {
            controlsDescendantBindings: true
        };
    }
}

var entriesdata = [{"entry_id":"51794","project_id":"2571","user_id":"89","entry_data":[{"entry_data_id":"359192","entry_id":"51794","entry_hours":"0.00","entry_date":"2013-12-22","comment":""},{"entry_data_id":"359193","entry_id":"51794","entry_hours":"8.00","entry_date":"2013-12-23","comment":"Test comment"},{"entry_data_id":"359194","entry_id":"51794","entry_hours":"8.00","entry_date":"2013-12-24","comment":"Test comment"},{"entry_data_id":"359195","entry_id":"51794","entry_hours":"0.00","entry_date":"2013-12-25","comment":""},{"entry_data_id":"359196","entry_id":"51794","entry_hours":"8.00","entry_date":"2013-12-26","comment":"Test comment"},{"entry_data_id":"359197","entry_id":"51794","entry_hours":"8.00","entry_date":"2013-12-27","comment":"Test comment"},{"entry_data_id":"359198","entry_id":"51794","entry_hours":"0.00","entry_date":"2013-12-28","comment":""}]}];
var projectsdata = [{"project_txt":"Test Project","project_id":12345}];
var TimeEntriesModel = function(entries, projects) {
    var self = this;

    self.projects = ko.observableArray(projects);

    self.entries = ko.observableArray(ko.utils.arrayMap(entries, function(entry) {
        return {
                entry_id : entry.entry_id,
                project_id : entry.project_id,
                user_id : entry.user_id,
                entry_data : ko.observableArray(entry.entry_data)
                }
    }));

    self.save = function () {
        ko.utils.stringifyJson(self.entries);

    }

    self.modal = {
        header: "Add/Edit Comment",
        comment: ko.observableArray([{comment: "test"}]),
        closeLabel: "Cancel",
        primaryLabel: "Save",
        show: ko.observable(false), /* Set to true to show initially */
        onClose: function() {
            self.onModalClose();
        },
        onAction: function() {
            self.onModalAction();
        }
    }
    console.log(ko.isObservable(self.modal.comment));
    self.showModal = function() {
        self.modal.show(true);
    }

    self.onModalClose = function() {
        // alert("CLOSE!");
    }
    self.onModalAction = function() {
        // alert("ACTION!");
        self.modal.show(false);
    }

}

ko.applyBindings(new TimeEntriesModel(entriesdata, projectsdata));

fiddle :http://jsfiddle.net/sL3HK/

正如您在 fiddle 中看到的那样，模态打开时带有文本框，但我无法弄清楚如何将“评论”文本放入模态或在按下“保存”按钮时更新评论.

有什么想法吗？

另外，我是 Knockout 的新手，所以如果其中有任何看起来不太正确的地方，请随时纠正我。

更新:

我一直在摆弄代码，并且已经能够将“评论”放入模态中，但是到目前为止我还没有能够成功地更新它。我最终会遇到的另一个问题是我只希望在单击“保存”时更新评论，而不是在模糊时正常更新。我真的认为我的做法是错误的，但我不确定正确的方法是什么。非常感谢任何更多帮助。

Updated fiddle.

最佳答案

这是一个JsFiddle您应该可以在其中编辑每个条目的评论。这是我如何获得它的。

ViewModels

首先，我喜欢将我的观点分成几个部分。对于每种类型的部分，我创建了一个 ViewModel。并且“上层”ViewModel 用作所有部分 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);
} 

基本上，此构造函数将您的原始数据转换为您可以在 View 中操作的数据。根据您想做什么，您可以让事情变得可观察或不可观察。 comment 用于某些绑定(bind)，预计会发生变化。我们希望页面对其变化做出动态 react ，所以让我们让它变得可观察。
由于此更改，我们将更改创建“上层”ViewModel(此处为 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
        }))
    }
}));

现在我们的 ViewModel 已准备好更新。 那么让我们改变模态。

模态

同样，在模式中，comment 会发生变化，我们想要检索它的值(以更新我们的 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.onModalAction = function () {
    self.modal.entryData.comment(self.modal.comment()); //save the modal's comment into the entryData.
    self.modal.show(false);
}

结论

我不想更改您所有的绑定(bind)和代码，因此有很多小的更改，我认为您必须尝试使用​​这些代码来了解它们如何影响页面的行为，以及它是如何工作的。 我的解决方案当然不完美。您的 HTML 标记中仍有一些逻辑必须移至 JS，我不确定您是否真的需要所有自定义绑定(bind)内容。此外，我对模态不满意。模态内容应属于 EntryDataViewModel，因为编辑评论会作用于一个 EntryData，但正如我所说，我不想更改所有代码。如果您对我的解决方案有疑问，请告诉我 :)。

更新(一些进一步的提示)

当我说“将逻辑从 HTML 转移到 JS”时，这就是我的意思。以下绑定(bind)看起来很复杂，属于 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，然后你的点击绑定(bind)变成 click : $root .showModal。即使是“needs-comment”绑定(bind)也有逻辑，您可以将方法 needsComment 添加到包含此逻辑的 EntryDataViewModel。
请记住，HTML 标记不应包含任何逻辑，它应该只是调用 JS 函数。如果一个函数作用于 View 的一部分(例如，一个 EntryData)，那么这个函数属于部分 View 模型(这就是为什么我提示模态，它只作用于一个 EntryData 但这里位于TimesEntriesModel)。如果一个函数操作一组元素(例如，如果您创建一个“添加”按钮)，则该函数属于容器 ViewModel。

这是一个非常长且具体的答案。对此表示歉意。您应该能够在网络上找到有关 Model View ViewModel (MVVM) 的大量资源，这将对您的旅程有所帮助:)

关于javascript - 将模态数据绑定(bind)到 knockout 模型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20751587/