javascript - KnockoutJS - 在表单中使用表中的数据

Question

我对 knockout 还比较陌生，而且我已经研究了我的主题几个小时但毫无结果，所以我最终发现自己实际上在问一个我不认为已经被问到的问题问。

无论如何，我正在编写一个基本的单页应用程序，该应用程序通过 AJAX 从服务器提取数据(完成)，显示这些记录的表格(工作，但可能未完成)，并允许用户编辑记录从 jQueryUI 对话框上的表单中的表中，最好不要从服务器加载更多数据，因为所有需要的数据当前都在表中(这就是我搞砸的地方)，然后最终仅将一条记录发布回服务器。作为奖励，我希望表单也能更新表中的内容，这样就不需要重新加载。

我的基本 View 模型。我还有一些绑定(bind)代码，用于通过单击我省略的标题对列进行排序，因为它与问题无关

function AppViewModel() {
    var self = this;

    self.records = ko.observableArray(ajaxRecords); //ajaxRecords is a JSON object from the server

    /*
        THIS SECTION MOVED BELOW FOR EXPLANATION
                                                  */

}

我已经能够通过使用新的 viewModel 将数据获取到表单中，该 viewModel 从每行绑定(bind)的单击函数传递对象:

    self.switchDataToForm = function(clickedItem) {
        ko.applyBindings(new FormViewModel(clickedItem), document.getElementById('detailsPage'));
    }

但我只是觉得这是一种糟糕的做事方式，而这一切应该可以通过一个 ViewModel 来实现。

我很想知道人们对此有何评论。对于某些人来说，这可能是非常明显的，但我只是很难理解这种 knockout 的思维方式。如果这是一个 jQuery 任务，那么几个小时前就已经完成了，但标记要多得多。我对 Knockout JS 为 JS 开发场景提供的功能感到非常兴奋，我想开始在实践中使用它。

Answer 1

你可以尝试这样的事情:

function AppViewModel() {
    var self = this;

    self.records = ko.observableArray(ajaxRecords); //ajaxRecords is a JSON array from the server

    self.form = ko.observable();

    self.switchDataToForm = function(clickedItem) {
        self.form(new FormViewModel(clickedItem));
    }

    /* another data goes here */
}

function FormViewModel(item) {
    var self = this;
    self.someProp = ko.observable(item.someProperty);

    /* another observables goes here */
}

和 html:

<form id="detailsPage" data-bind="with: form">
    <input type="text" data-bind="value: someProp" />
    ... 
</form>

您可以在这个 fiddle 中看到它是如何工作的:http://jsfiddle.net/Ivan_Srb/MKB8W/2/