Question

我使用Knockout创建了一个master-details ui。主服务器上的itemselected事件处理程序绑定给定数据项的详细信息视图。一切都工作到目前为止，但我想访问绑定到详细信息区域的数据，以便我可以在更新后将其发布到服务器。

我是Knockout的新手，所以请告知是否有更好的方法。

//the master binding code
$.ajax({
url: getURL,
success: function (data) {
var viewModel = new itemModel(data);
var scope = document.getElementById("listContainer");
ko.cleanNode(scope);
ko.applyBindings(viewModel, scope);
}



//the viewmodel with event hander
function itemWrapper(item) {
    this.SolutionSet = ko.observable(item.SolutionSet);
    this.Insight = ko.observable(item.Insight);
    this.DateFrom = ko.observable(item.DateFrom);
    this.DateTo = ko.observable(item.DateTo);
}

var itemModel = function (data) {
    var self = this;
    var observableData = ko.utils.arrayMap(data, function (item) {
        return new itemWrapper(item);
    });

    self.items = ko.observableArray(observableData);
    onItemSelected = function (data) {
        var scope = document.getElementById("itemEditor");
        ko.cleanNode(scope);
        ko.applyBindings(data, scope);
    };
}

Answer 1

我假设您有一个表格或某些东西，然后您正在编辑您的详细信息？

只需在viewmodel中保留提交

即可

var itemModel = function (data) {
   this.onFormSubmit = function (item) {
     //call ajax and pass you item
   }
}


<form data-bind="submit: itemModel.onFormSubmit">
   fields here like so
   <input data-bind='value: itemModel.DateFrom , valueUpdate: "afterkeydown"'/> 
</form>

Answer 2

您的onItemSelected函数可能应该是self.onItemSelected（否则它是一个挂起window的全局变量）。

您可以使用第二种视图模型技术，或者像Boone建议的那样，只需将表单放在第一个视图模型的范围内，然后让Knockout解析它。

添加：

...
self.selectedItem = ko.observable();
self.onDetailsSubmit = function () { 
    self.selectedItem(null);
    // anything else you want to do
};
...

到您的视图模型并使用所选项目的索引进行更新（或将其保留为null以隐藏表单）。

<form data-bind="visible: selectedItem()">
    <!-- ko with: items()[selectedItem()] -->
    <input type="text" data-bind="value: SolutionSet" />
    <input type="text" data-bind="value: Insight" />
    <input type="text" data-bind="value: DateFrom" />
    <input type="text" data-bind="value: DateTo" />
    <button data-bind="click: $parent.onDetailsSubmit">Submit</button>
    <!-- /ko -->
</form>

我是从记忆中写下来的，希望它有效。

我可以在Knockout中绑定后访问viewModel吗？

2 个答案: