0

MVC4 を使用して複雑なビューモデルを設定しています。私はこのように人口を増やしています

var job = @Html.Raw(Json.Encode(Model.job));
var customer = @Html.Raw(Json.Encode(Model.customer));
var listTasks = @Html.Raw(Json.Encode(Model.Tasks));
var estimateMaterials = @Html.Raw(Json.Encode(Model.estimateMaterials));
var estimate = @Html.Raw(Json.Encode(Model.estimate));

var JobPost = {
    customer: customer,
    job: job,
    listTasks: ko.observableArray(listTasks),
    estimateMaterials: ko.observableArray(estimateMaterials),
    estimate: ko.observable()
};
ko.applyBindings(JobPost,  document.getElementById("update-job-form"));

これで、オブジェクトestimateMaterialsが行に取り込まれています。Removeそしてその行に、このように各行とAdd buttonテーブルの一番下に追加したい

テーブルのイメージ

次に、行の追加/削除を簡単に行う rniemeyer の素晴らしいフィドルを見ました。
フォークされたフィドルは次のとおりです。http://jsfiddle.net/codovations/tDV9k/

その中で、このようなスニペットがあります

self.addLine = function() { self.lines.push(new CartLine()) };
self.removeLine = function(line) { self.lines.remove(line) };

観測可能な配列にそのようなものを実装したいと思います
estimateMaterials: ko.observableArray(estimateMaterials)

このようなメソッドを追加することは可能ですか?

PS: jquery を使用して行を複製/最も近い tr をそれぞれ削除することにより、追加/削除しています。よりクリーンな方法を探しています。

アップデート：

ここで直面している主な問題は、オブジェクトにアクセスする方法です。observableArray

4

1 に答える 1

1

あなたの質問を間違って理解した可能性があります。以下をご覧になり、ご不明な点がございましたらお知らせください。

function EstimateMaterialLine() {
    var self = this;
    self.EstMatlID = ko.observable();
    //other observables to follow
}
var job = @Html.Raw(Json.Encode(Model.job));
var customer = @Html.Raw(Json.Encode(Model.customer));
var listTasks = @Html.Raw(Json.Encode(Model.Tasks));
var estimateMaterials = @Html.Raw(Json.Encode(Model.estimateMaterials));
var estimate = @Html.Raw(Json.Encode(Model.estimate));

var JobPostViewModel = function(){
    var self = this;
    self.customer = ko.observable(customer);
    self.job = ko.observable(job);
    self.listTasks = ko.observableArray(listTasks);
    self.estimateMaterials = ko.observableArray(estimateMaterials);
    self.estimate = ko.observable(estimate);
    self.removeEstimateMaterial = function(line) { 
        self.estimateMaterials.remove(line) 
    };
    self.addEstimateMaterial = function() { 
        self.estimateMaterials.push(new EstimateMaterialLine()) 
    };
};
var model = new JobPostViewModel();
ko.applyBindings(model,  document.getElementById("update-job-form"));

テーブルがあるとしましょう。次のように使用できます。

<table data-bind="foreach: estimateMaterials">
    <tr>
       <td> <input type="button" value="delete" data-bind="click: $root.removeEstimateMaterials"/> </td>
    <tr>
</table>
<input type="button" value="Add" data-bind="click: $root.addEstimateMaterials"/>
于 2013-10-02T12:19:02.177 に答える