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

2番目のビューモデル手法を使用するか、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>

私はこれをメモリから書きました、うまくいけばうまくいきます。

于 2012-12-15T01:10:51.480 に答える