0

ここで何かが非常に間違っていると思います。ko.computedこのように aに aを追加したいと思いko.observableArrayます。

その前に、明確にするために私のモデル

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

var JobPostViewModel = function(){
    var self = this;
    //self.customer = ko.observable(customer);
    //self.job = ko.observable(job);
    //self.estimateMaterials = ko.observableArray(estimateMaterials);
    //self.estimate = ko.observable(estimate);
    self.estimateTasks = ko.observableArray(estimateTasks);
    self.estimateTasks().estLaborSubTotal = ko.computed(function () {
        return (isNaN(self.EstHr)? 0: +self.EstHr) * (isNaN(self.TaskPerHourCost)? 0: +self.TaskPerHourCost);
    });
};
var model = new JobPostViewModel();
ko.applyBindings(model,  document.getElementById("my_job_form"));

これが私のモデルバインドです。my_job_formにdata-bind="with:jobs"バインドされているフォーム内にテーブルを作成していestimateTasksます。マークアップは

<tbody data-bind="foreach: $root.estimateTasks">
    <tr>
        <td>
            <input type="text" data-bind="value: EstHr" />
            <input type="hidden" data-bind="value: TaskPerHourCost" />
        </td>
        <td>
            <input type="text" data-bind="value: estLaborSubTotal" disabled />
        </td>
    </tr>
</tbody>

バインド時にエラーが発生します

ReferenceError: estLaborSubTotal が定義されていません

ここで何が間違っていますか？

4

3 に答える 3

3

計算済みを配列に追加しています。この配列は、estimateTasks observableArray(); の評価の結果です。

あなたが何をしようとしているのか理解できれば。

こうすればいい。これにより、計算された名前の estLaborSubTotal が item に追加されます。

var JobPostViewModel = function(){
    var self = this;
    ko.utils.arrayForEach(estimateTasks, function(et) {
        et.estLaborSubTotal  = ko.computed({
            read: function(){
                var estHr = this.EstHr();
                var taskPerHourCost =  this.TaskPerHourCost();
                if(estHr === null)
                    return 0;
                return estHr * taskPerHourCost; 
            },
            owner : et // specify the "this" during evaluation 
        });
    });

    self.estimateTasks = ko.observableArray(estimateTasks);
};

フィドルを見る

お役に立てば幸いです。

于 2013-10-07T10:57:09.513 に答える
2

これがあなたがやろうとしていることだと思います-

function jobPostEstimateTaskModel (task) {
    var self = this;
    // Make some properties of this task observable
    self.name = ko.observable(task.name);
    // Make a computed for each task
    self.estLaborSubTotal = ko.computed(function () {
        return (isNaN(self.EstHr)? 0: +self.EstHr) * (isNaN(self.TaskPerHourCost)? 0: +self.TaskPerHourCost);
    });
}

var JobPostViewModel = function(){
    var self = this;
    self.estimateTasks = ko.observableArray();
    $.each(estimateTasks, function (index, item) {
        self.estimateTasks.push(new jobPostEstimateTaskModel(item));
    }
};

これにより、作成した従来の JavaScript 配列の EstimateTasks が反復処理され、配列内の各タスクに新しい jobPostEstimateTaskModel オブジェクトが追加されます。この例では name などの監視可能なプロパティをタスクに作成し、配列内の各項目に対して計算されたプロパティを作成します。

上記の方法で呼び出すことにより、observableArray に計算されたものを作成するだけで、意図したことを実行しません。

混乱のポイントの 1 つは、ViewModel に evaluateTasks という名前の observableArray であるオブジェクトがありますが、まったく同じ名前の「上」のコンテキストにも変数があることです。明確にするために、監視対象外の名前をestimateTasksJsonのような名前に変更することを検討してください。

編集

これにアプローチするもう 1 つの方法は、プロトタイピングを使用することです。jobPostEstimateTaskModel などのオブジェクトをインスタンス化する必要がありますが、呼び出したいものは何でも構いませんが、毎回そのコードを反復処理して、それをモデル。

于 2013-10-10T17:23:35.880 に答える
1

あなたの問題は、foreach現在のバインディングコンテンツの中に現在の配列要素があることです。そして、この要素にはプロパティ
がありません。 代わりに使用できます。estLaborSubTotal
<input type="text" data-bind="value: $root.estimateTasks().estLaborSubTotal" disabled />

または、ビューモデルを変更できます。

var JobPostViewModel = function(){
    var self = this;
    //self.customer = ko.observable(customer);
    //self.job = ko.observable(job);
    //self.estimateMaterials = ko.observableArray(estimateMaterials);
    //self.estimate = ko.observable(estimate);
    self.estimateTasks = ko.observableArray(estimateTasks);
    self.estLaborSubTotal = ko.computed(function () {
        return (isNaN(self.EstHr)? 0: +self.EstHr) * (isNaN(self.TaskPerHourCost)? 0: +self.TaskPerHourCost);
    });
};

そして使用します<input type="text" data-bind="value: $root.estLaborSubTotal" disabled />。

于 2013-10-11T08:48:56.540 に答える