1

我使用 Knockout 创建了一个主详细信息 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);
    };
}
4

2 回答 2

1

我假设您有一个表格或其他东西,然后您正在编辑您的详细信息?

只需将提交保留在您的视图模型中

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>
于 2012-12-15T00:06:53.253 回答
0

您的onItemSelected函数可能应该读取self.onItemSelected(否则它是一个全局变量window)。

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

添加:

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

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

<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>

我是凭记忆写的,希望它有效。

于 2012-12-15T01:10:51.480 回答