Question

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，但没有运气;似乎没有评估来自服务器的数据（我使用了这里的例子：Computed values in knockout 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);
     }
)
);

这是viewmodel：

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/

Answer 1

我希望你不会反对我，Jimbo，但感觉你在这里弄得一团糟。您的脚本中有大量不相关且无法访问的实用程序。不要误会我的意思，我认为你使用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() {
}
})();

我希望这有帮助，但如果我完全错过了这个标记，请原谅我。

Knockout - ForEach循环中的总列值

1 个答案: