0

Knockout（およびDurandal / Breeze）の非常に新しいものです。. .

Knockout の ForEach を使用して、プロジェクトのすべての従業員の予測時間と実際の時間の列をいくつか表示しています。次に、各列の予測時間と実際の時間の差 (hourDiff) を計算します。また、各従業員の姓名の書式設定も行いたいと考えています。データはサーバーから送られてくるので、ここまですべてを正しく機能させようとして窮地に追い込まれたのではないかと心配しています。時間は、実際には各従業員オブジェクト内にネストされています。 

[n, n]
 0: n
 1: n
   employee: function dependentObservable() {
  __ko_proto__: function (evaluatorFunctionOrOptions, evaluatorFunctionTarget, options) {
  _latestValue: n
  actualHours: Object[0]
 firstName: function dependentObservable() {
 forecastedHours: Object[0]
 lastName: function dependentObservable() {

Knockout の Cart の例を使用してみましたが、セットアップとは少し異なり、適切に動作させることができませんでした。Knockout の arrayMap も使用してみましたが、うまくいきませんでした。サーバーからのデータは評価されていないようです (ここにある例を使用しました:ノックアウト koGrid で計算された値。私のコードは、何かを渡すことができるかどうかを確認するためのものでした。):

function Item(data) {
        system.log('Within Item');
        this.employee = ko.observable(data.employee);

    }

    var mappedData = ko.observableArray(
     ko.utils.arrayMap(staffingResources, function (data) {
         system.log('Within mappedData');
         return new Item(data);
     }
)
);

ビューモデルは次のとおりです。

define(['durandal/system', 'durandal/app', 'durandal/activator', 'plugins/router', 'jquery', 'knockout', 'services/projectdetailmanager'],
function (system, app, activator, router, $, ko, pdm) {


    var taskID;
    var laborCategories = ko.observableArray();
    var staffingResources = ko.observableArray();
    var staffingHours = ko.observableArray();


    activate = function (context) {
        pdm.clearManager();
        taskID = context.task
        system.log("taskID = " + context.task);
        staffingHours([]);
        staffingResources.removeAll();
        staffingResources([]);
        getStaffingHours(taskID);
        getLaborCategories();
        getStaffingResources(taskID);

    }
    function getStaffingHours(taskID) {
        return pdm.getStaffingHours(taskID)
               .then(function (data) {
                   staffingHours(data);
               });
    };
    function getStaffingResources(taskID) {
        return pdm.getProjectEmployeesByTask(taskID)
               .then(function (data) {
                   staffingResources(data);
               });
    };

    function getLaborCategories() {
        return pdm.getAllLcats()
               .then(function (data) {
                   laborCategories(data);
               });
    };


    hourDiff = ko.computed(function () {
        return 0;

    });


    function save() {
        pdm.saveChanges();
    };


    return {
        activate: activate,
        staffingResources: staffingResources,
        forecastedHours: forecastedHours,
        actualHours: actualHours,
        laborCategories: laborCategories,
        save: save,
        hourDiff: hourDiff,
        addResource: addResource

    };


});

そして、これがhtmlです（現在、「hourDiff」はプレースホルダーの目的で通常の関数に移動しています）：

<table width="100%" border="0">
<thead>
    <tr>
        <td style="font-weight: bold;">Name</td>
        <td style="font-weight: bold;">Labor Category</td>
        <td>&nbsp;</td>
    </tr>
</thead>
<tbody data-bind='foreach: staffingResources'>
    <tr>
        <td style="vertical-align: top;"><span data-bind="text: employee().lastName()" />, <span data-bind="    text: employee().firstName()" /></td>
        <td style="vertical-align: top; width: 20%">
            <select data-bind="options: $root.laborCategories, optionsText: 'name', value: laborCategory, event: { change: $root.save }" /></td>



        <!--Next ForEach Here-->



            <!-- Test -->
            <table border="1">
                <tr>
                    <td>

                        <table border="1">

                            <tr>
                                <td style="font-weight: bold">Month</td>
                            </tr>
                            <tr>
                                <td style="font-weight: bold; width: 20%">Projected: </td>
                            </tr>
                            <tr>
                                <td style="font-weight: bold; width: 20%">Actual: </td>
                            </tr>
                            <tr>
                                <td style="font-weight: bold">Difference: </td>
                            </tr>
                        </table>
                    </td>


                     <!-- ko foreach: $data.employee().hours() -->
                    <td>

                        <table>

                            <tr>
                                <td>Month</td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="text" data-bind="value: forecastedHours, event: { change: $root.save }, valueUpdate: 'afterkeydown'" style="width: 50px;" /></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="text" data-bind="value: actualHours, event: { change: $root.save }, valueUpdate: 'afterkeydown'" style="width: 50px;" /></td>
                            </tr>
                            <tr>
                                <td><span data-bind="text: $root.hourDiff()" /></td>

                            </tr>


                        </table>


                    </td>
                     <!-- /ko -->
                </tr>

            </table>
            <!-- Test -->

     </tr>
                  </tbody>  
            </table>

どんな助けでも大歓迎です。見やすくするために、ここにフィドルを作成しました：http://jsfiddle.net/JfKkm/

4

1 に答える 1

1

ジンボ、あなたが私に反対しないことを願っていますが、あなたはここで混乱しているように感じます. スクリプトには、無関係でアクセスできないユーティリティがたくさんあります。誤解しないでください。AMDを使用しているのはクールだと思いますが、それはあなたの質問に答えるのをはるかに難しくするだけです.

Knockout の核となる概念をよりよく理解し、問題をよりよく理解できるように、例を単純化することをお勧めします。私はあなたのスクリプトでまとまりのあるビュー モデルを把握していません。Knockout は、モデリングに適した MVVM パターンに基づいています。次の疑似コードは、私がビュー モデルを定義するために使用する手法の例です。計算されたプロパティを使用した例もいくつか含めました。

(function () {
var vm = {
    laborCategories: ko.observableArray([]),
    staffingResources: ko.observableArray([]),
    staffingHours: ko.observableArray([]),
}

// init
var employees = ko.utils.arrayMap(getEmployees(), function(emp) {
    return new Employee(emp); 
});
vm.staffingResources(employees);

// private models
function Employee(data) {
    var model = {
        firstName: ko.observable(data.firstName),
        lastName: ko.observalbe(data.lastName),
        actualHours: ko.observable(data.actualHours),
        forecastedHours: ko.observable(data.forecastedHours),
    }

    model.hourDiff = ko.computed(function() {
        return this.actualHours - this.forecastedHours;
    }, model);
    model.nameFormatted = ko.computed(function() {
        return this.lastName() + ', ' + this.firstName();
    }, model);    
}

ko.applyBindings(model);

// private functions
function getStaffingHours(taskID) {        
}
function getStaffingResources(taskID) {
}
function getLaborCategories() {
}
function save() {
}
})();

これが役立つことを願っていますが、完全に的を外した場合はご容赦ください。

于 2013-11-13T05:56:45.337 に答える